Table

Tables are an essential part of many different contexts. Kube serves them all and delivers full variety of tables, preformatted to save you time. Whatever your requirements are, tables are completely customizable to match them.

Base #

The base table without a CSS class looks fine by default.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Total points 223
<table>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
</table>

Bordered #

The is-bordered class makes your tables more solid and adds extra space to both sides of the cell.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Total points 223
<table class="is-bordered">...</table>

Striped #

A is-striped class adds a zebra background to the rows of the table. It makes the long data more readable.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Total points 223
<table class="is-striped">...</table>

Mixed #

Of course, you can mix classes for one table.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Total points 223
<table class="is-bordered is-striped">...</table>

Align Middle #

Using the is-middle modifier for tr or td tags, you can align the table content vertically.

First Name Last Name
Jill
Bill
Phill
Smith


Eve
Jackson
<table>
    <tr>
        <td class="is-middle">...</td>
    </tr>
    <tr class="is-middle">
        <td>...</td>
    </tr>
</table>

Responsive #

Kube has two ways in which to make responsive tables for mobile or small screens.

Container

The first way is to put the table in the table container. The container will have its horizontal scroll for small screens, and the table will remain in its full width with readable cells.

Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9 Col 10 Col 11 Col 12 Col 13 Col 14 Col 15 Col 16
<div class="is-table-container">
    <table>...</table>
</div>

Responsive class

The second way is to add responsive class to the table and data-labels to cells that will convert your table in one column on the small screens but make it still readable with data-labels as pointers of cell data.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
<table class="is-responsive">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="First Name">...</td>
            <td data-label="Last Name">...</td>
            <td data-label="Points">...</td>
        </tr>
    </tbody>
</table>

Sizing #

Use the size classes to set width for your columns in the table.

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
<table>
    <tr>
        <td class="is-40">...</td>
        <td class="is-40">...</td>
        <td class="is-20">...</td>
    </tr>
</table>