Permalink
Fetching contributors…
Cannot retrieve contributors at this time
145 lines (118 sloc) 3.18 KB

Table

Provides styles for tables and their common use cases.

Usage

The table component removes the overhead of table styling and structuring, by collapsing borders, fine-tuning cell spacing, and adding modifiers for common use cases. To make use of this functionality, add .table to a table tag.

<table class="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Miles</td>
            <td>Johnson</td>
            <td>@mileswjohnson</td>
        </tr>
        ...
    </tbody>
</table>

When using the table component, all rows must be wrapped in a thead or tbody, and proper placement of tds and ths are required.

Modifiers

To add zebra-striping to all rows in a tbody, add .is-striped.

<table class="table is-striped is-striped">
    ...
</table>

To add a hover state to all rows in a tbody, add .has-hover.

<table class="table is-striped has-hover">
    ...
</table>

Sizes

Add a .small or .large class to the table to alter the padding of all cells.

<table class="table is-striped large">
    ...
</table>

Sortable Headers

Add an .is-sortable class to the table to enable sortable headers. All columns in a thead will need to be wrapped in an a or span.

<table class="table is-striped is-sortable">
    <thead>
        <tr>
            <th><a href="">Title</a></th>
            <th><a href="">Description</a></th>
            <th><span>Actions</span></th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Use .sorter from the base CSS for ascending and descending arrows.

<th>
    <a href="">
        Title
        <span class="sorter asc">
            <span class="caret-up"></span>
            <span class="caret-down"></span>
        </span>
    </a>
</th>

Dividers

Add a .table-divider to a tbody tr to separate rows.

<tbody>
    <tr class="table-divider">
        <td colspan="5">Groups</td>
    </tr>
    ...
</tbody>

Responsive Tables

Support responsive design by wrapping all .tables in .table-responsive, which allows tables to scroll horizontally when bleeding out of the viewport or their container.

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

Variables

Variable Default Description
$table-class .table CSS class name for the table element.
$table-class-divider .table-divider CSS class name for the table row divider.
$table-class-responsive .table-responsive CSS class name for the responsive table wrapper.