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

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>

Horizontal Table

You can use this table without the emphasis of a table header. Just add a class.table-h

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
<!--Add class name table-h for horizontal tables-->
<table class="table table-h">
    <tbody>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
    </tbody>
</table>

Vertical Header Table

You can use this table with left header header. Just add a class.table-v

Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.
<!--Add class name table-v for horizontal tables-->
<table class="table table-v">
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
    <tr>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
        <td>Lorem ipsum dolor.</td>
    </tr>
</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.

Chat with the team