Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins).

Examples#

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

All table styles are inherited in CAKE, meaning any nested tables will be styled in the same manner as the parent.

Default table#

preview

<table class="table ">
    <tbody>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
    </tbody>
</table>

Table with column-header#

preview

<table class="table ">
    <thead>
        <tr>
            <th>Column head</th>
            <th>Column head</th>
            <th>Column head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
    </tbody>
</table>

Table with row-header#

preview

<table class="table ">
    <tbody>
        <tr>
            <th>Row head</th>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <th>Row head</th>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <th>Row head</th>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
    </tbody>
</table>

Table with multiple headers#

preview

<table class="table ">
    <thead>
        <tr>
            <th>Column head</th>
            <th>Column head</th>
            <th>Column head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row head</th>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <th>Row head</th>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
    </tbody>
</table>

Striped rows or cols#

Use .table-striped to add zebra-striping to any table row within the <tbody>. The rows will be striped in the horizontal direction. To create the zebra-striping in the vertical orientation simply use .table-striped-v.

Table with vertical background#

preview

<table class="table table-striped-v">
    <tbody>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
    </tbody>
</table>

Table with horizontal background#

preview

<table class="table table-striped">
    <tbody>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
        <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
        </tr>
    </tbody>
</table>

Responsive tables#

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Responsive table#

preview

<div class="table-responsive">
    <table class="table ">
        <tbody>
            <tr>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
            </tr>
            <tr>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
            </tr>
            <tr>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
                <td>Table content</td>
            </tr>
        </tbody>
    </table>
</div>

Vertical clipping/truncation#

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive#

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

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

Breakpoint specific#

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

These tables may appear broken until their responsive styles apply at specific viewport widths.

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