Table

Simply add the .table CSS class to a <table> element, following this structure:

  • table the main container
    • thead the optional top part of the table
    • tfoot the optional bottom part of the table
    • tbody the main content of the table
      • tr each table row
        • th a table cell heading
        • td a table cell
# Column 1 Column 2 Column 3
# Column 1 Column 2 Column 3
1 Item data Secondary text Item data Small description Item data
2 Item data Secondary text Item data Small description Item data
3 Item data Secondary text Item data Small description Item data
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
    </tbody>
</table>

Modifiers

  • is-bordered
  • is-striped
  • is-narrow
  • is-hoverable
  • is-fullwidth

Bordered

# Column 1 Column 2
# Column 1 Column 2
1 Item data Secondary text Item data Small description
2 Item data Secondary text Item data Small description
3 Item data Secondary text Item data Small description
 

































<table class="table is-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
        </tr>
    </tbody>
</table>

Striped

# Column 1 Column 2
# Column 1 Column 2
1 Item data Secondary text Item data Small description
2 Item data Secondary text Item data Small description
3 Item data Secondary text Item data Small description
 

































<table class="table is-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
        </tr>
    </tbody>
</table>

Narrow

# Column 1 Column 2
# Column 1 Column 2
1 Item data Secondary text Item data Small description
2 Item data Secondary text Item data Small description
3 Item data Secondary text Item data Small description
 






































<table class="table is-narrow">
    <thead>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
    </tbody>
</table>

Hoverable

# Column 1 Column 2
# Column 1 Column 2
1 Item data Secondary text Item data Small description
2 Item data Secondary text Item data Small description
3 Item data Secondary text Item data Small description
 






































<table class="table is-hoverable">
    <thead>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item data <small>Secondary text</small></td>
            <td>Item data <span class="is-secondary">Small description</span></td>
            <td>Item data</td>
        </tr>
    </tbody>
</table>

Variables

Name Type Value Computed value
$table-cell-heading-bg-color color $grey-lighter
rgb(242, 242, 242)
$table-cell-heading-font-weight font-weight $weight-bold 700
$table-cell-heading-border-width sizes 0 0 1px
$table-cell-heading-color color $darker-grey
rgb(85, 85, 85)
$table-cell-heading-color color $darker-grey
rgb(85, 85, 85)
$table-cell-color color $black
rgb(0, 0, 0)
$table-head-cell-border-width sizes 0 0 1px
$table-head-cell-color color $darker-grey
rgb(85, 85, 85)
$table-foot-cell-border-width sizes 1px 0 0
$table-foot-cell-color color $darker-grey
rgb(85, 85, 85)
$table-cell-border color 1px solid
rgb(223, 227, 230)
$table-cell-border-width sizes 0 0 1px
$table-cell-padding sizes 1.125em 1em
$table-cell-secondary-text-font-size size .875em
$table-cell-secondary-text-color size
rgb(90, 104, 114)
$table-striped-row-even-background-color size
rgb(249, 252, 255)
$table-row-hover-background-color color $grey-lighter
rgb(242, 242, 242)
← Content →