Bulma: Class to adjust width Bulma Table Column

[SDJeff]

How to adjust the table column width. Knows anybody a class definition or have i to use the grid definition like it is in bootstrap?

[jgthms]

You need to set the width of each column manually, since table can contain any type of data. It would be too bloated to have 100 classes for each possible width.

[swalker2]

It woul be nice to write on the header for example <th class="is-2">...</th>

[sangdth]

I agree. It would be nice if we can add columns in to table, and use is-2, is-half to customize the width of columns.

[focussing]

Beautiful!! Same approach as working with 'normal' columns

[Fsarmento]

+1

[andonovn]

+1

[pgangidi]

+1

[ukarim]

+1

[Grovkillen]

+1

[lucasrosa90]

+1

[brakkum]

Might as well, +1

[murilobd]

+1

[alalfakawma]

Hi guys, I just wrote a small scss mixin to be able to do this as @swalker2 has suggested above. It works like a charm.

link to gist

[molcik]

You can also use colspan property. To create proportional layout. E.g.

<tr>
    <td colspan="2"></td>
    <td></td>
</tr>

[fakhrulhilal]

Why not reuse this? For consistency reason, I suggest to reuse same naming.

[antoniputra]

Just want to share how I did for this case

<div class="table-container">
    <table class="table is-bordered is-fullwidth is-hoverable">
        <thead>
            <tr>
                <th>No</th>
                <th><div style="width: 200px;">Name</div></th>
                <th>Price</th>
                <th>Type</th>
                <th><div style="width: 120px;">Action</div></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>...</th>
                <th>...</th>
                <th>...</th>
                <th>...</th>
                <th>...</th>
            </tr>
            ....
        </tbody>
    </table>
</div>

Result:

What you see in desktop, is what you get on mobile (with scroll)