Table

Table present raw data sets and lend meaning to the data, while maintaining that the data is readable, scannable and easily comparable
Header Field A Header Field B
Data 1A Data 1B
Data 2A Data 2B
Data 3A Data 3B

Usage

You only need to attach a single table CSS class within the table tag.

<table class="table">
    <thead>
    <tr>
        <th>Header Field A</th>
        <th>Header Field B</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Data 1A</td>
        <td>Data 1B</td>
    </tr>
    <tr>
        <td>Data 2A</td>
        <td>Data 2B</td>
    </tr>
    <tr>
        <td>Data 3A</td>
        <td>Data 3B</td>
    </tr>
    </tbody>
</table>

Style

Modifier Description
is-bordered Use when you want to add borders to all the cells
is-striped Use when you want to add stripes to all the cells
is-narrow Use when you want to make the cells narrower
is-hoverable Use when you want to add hover effect on each row
is-fullwidth Use when you want to have a fullwidth table

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Tell us more