Tables

Table List

A table styled like a list. The active state can be invoked by adding class active to the <tr></tr> element. It is recommended that table-list's columns containing information of lesser importance be hidden in smaller screen sizes with Responsive Utilities due to space constraints.

Class table-bordered not compatible with table-list.

Table List Striped

Table List Hover

Table Helpers

table-autofit constrains table columns to be only as wide as its content, but must be used with table-cell-content. table-cell-content will fill the remaining space.

table-heading-nowrap keeps headings on one line.

Vertical Alignment

We have added some classes to help vertically align contents inside a table. The classes table-valign-bottom, table-valign-middle, and table-valign-top on <table> will vertically align table cell contents on the bottom, middle, and top, respectively.

The classes thead-valign-bottom, thead-valign-middle, and thead-valign-top on <table> will vertically align the contents inside the table head.

The classes tbody-valign-bottom, tbody-valign-middle, and tbody-valign-top on <table> will vertically align the contents inside the table body.

Default Table

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

Table Striped

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

Table Bordered

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

Table Hover

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