Completely borderless table

[timster]

First of all thanks for this project. It's been very helpful.

Since bulma applies the table borders to the individual cells, getting a completely borderless table is kind of tedius:

<table class="table">
    <tr>
        <th class="is-borderless">Header 1</th>
        <th class="is-borderless">Header 2</th>
    </tr>
    <tr>
        <td class="is-borderless">Cell 1</td>
        <td class="is-borderless">Cell 2</td>
    </tr>
</table>

It would be nice to be able to apply it to just the table and have it cascade down:

<table class="table is-borderless">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Basically, this:

.table.is-borderless
  td, 
  th
    border: 0

Is this a helper you would consider adding?

[jmaczan]

Hello Tim,

Sound like a plan 🙂 I'm gonna implement it in a days.

[jmaczan]

Done in version 0.3.2.

[coderabsolute]

I don't see this functionality in the documentation. Not sure is-borderless is still implemented in the current version (0.9.2)?

[cabrace]

// can be achieved with
.table.is-borderless td, .table.is-borderless th {
 border: 0;
}

<!-- Applied to  table element class -->
<table class="table is-borderless">
...
</table>

using: /*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */
Still don't see it available?

[campZero]

Never mind, came here via web search, didn't look to closely and assumed this was bulma, not bulma-helpers.
My bad.

[MartinX3]

Yeah, but it isn't working without the css hack even with the helper.
But with the css hack we don't need the helper as well.