Tables

Basic Tables

Here's an example of a basic table, with no classes added.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>87</td>
            <td>Sydney</td>
            <td>Crosby</td>
            <td>Penguins</td>
        </tr>
        <!-- And so on... -->
    </tbody>
</table>

And for a nice touch add the small heading classes to your heading cells.

<table>
    <thead>
        <tr>
            <th class="heading-xs">#</th>
            <th class="heading-xs">First Name</th>
            <th class="heading-xs">Last Name</th>
            <th class="heading-xs">Team</th>
        </tr>
    </thead>
    <tbody>
        <!-- And so on... -->
    </tbody>
</table>

Striped Tables

Use the class table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table-striped">
    <!-- And so on... -->
</table>

Bordered Tables

Add the class table-bordered for borders on all sides of the table and cells.

<table class="table-bordered">
    <!-- And so on... -->
</table>

Hover Rows

Add the class table-hover to enable a hover state on table rows within a <tbody>.

<table class="table-hover">
    <!-- And so on... -->
</table>

Condensed Tables

For a more tight and compact look, add the class table-condensed.

<table class="table-condensed">
    <!-- And so on... -->
</table>

And again, for a nice touch combine this with the small heading classes.

<table class="table-condensed">
    <thead>
        <tr>
            <th class="heading-xxxs">#</th>
            <th class="heading-xxxs">First Name</th>
            <th class="heading-xxxs">Last Name</th>
            <th class="heading-xxxs">Team</th>
        </tr>
    </thead>
    <tbody>
        <!-- And so on... -->
    </tbody>
</table>

Contextual Classes

You can add any of the contextual classes to your table rows or cells.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody>
        <tr class="primary">
            <td>87</td>
            <td>Sydney</td>
            <td>Crosby</td>
            <td>Penguins</td>
        </tr>
        <tr class="success">
            <td>97</td>
            <td>Connor</td>
            <td>McDavid</td>
            <td>Oilers</td>
        </tr>
        <tr class="info">
            <td>8</td>
            <td>Alex</td>
            <td>Ovechkin</td>
            <td>Capitals</td>
        </tr>
        <tr class="warning">
            <td>91</td>
            <td>John</td>
            <td>Tavares</td>
            <td>Islanders</td>
        </tr>
        <tr class="danger">
            <td>8</td>
            <td>Brent</td>
            <td>Burns</td>
            <td>Sharks</td>
        </tr>
    </tbody>
</table>

Color Library

Similarly to how you can use contextual color classes, you can also use any class from the color library.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody>
        <tr class="black">
            <td>87</td>
            <td>Sydney</td>
            <td>Crosby</td>
            <td>Penguins</td>
        </tr>
        <tr class="orange">
            <td>97</td>
            <td>Connor</td>
            <td>McDavid</td>
            <td>Oilers</td>
        </tr>
        <tr class="red">
            <td>8</td>
            <td>Alex</td>
            <td>Ovechkin</td>
            <td>Capitals</td>
        </tr>
        <tr class="blue">
            <td>91</td>
            <td>John</td>
            <td>Tavares</td>
            <td>Islanders</td>
        </tr>
        <tr class="teal">
            <td>8</td>
            <td>Brent</td>
            <td>Burns</td>
            <td>Sharks</td>
        </tr>
    </tbody>
</table>

Inverse Tables

To use light text on a dark background, add class table-inverted.

<table class="table-inverse">
    <!-- And so on... -->
</table>

<table class="table-inverse table-bordered">
    <!-- And so on... -->
</table>

Responsive Tables

One crucial thing missing from all of the table examples above is the responsiveness. Of course we want our tables to display nicely on mobile devices. So to create responsive tables, wrap any <table> in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

<div class="table-responsive">
    <table>
        <!-- And so on... -->
    </table>
</div>