Tables

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.

How to use

Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat 
<table class="table table-hover">
  <thead>
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    ...
  </tbody>
</table>

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat 
<table class="table table-sm">
  <thead>
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr> 
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr> 
  </tbody>
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

Column Head Column Head Column Head
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content 
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr> 

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-success">...</td>
  <td class="table-warning">...</td>
  <td class="table-danger">...</td> 
</tr>

Striped rows

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat 
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr> 
  </tbody>
</table>

Table select

Use .table-select.

# 01 02 03 04 05
1
2
3 
<table class="table table-striped table-select text-xs-center">
  <thead>
    <tr>
      <th class="empty">#</th>
      <th class="text-xs-center">01</th>
      <th class="text-xs-center">02</th>
      <th class="text-xs-center active">03</th>
      <th class="text-xs-center">04</th>
      <th class="text-xs-center">05</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <th>1</th>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td class="active"><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
    </tr>
    <tr>
      <th>2</th>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td class="active"><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
    </tr>
    <tr>
      <th>3</th>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td class="active"><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
      <td><span class="icon icon-checked icon-2x"></span></td>
    </tr>
  </tbody>
</table>

Hoverable rows

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat 
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr> 
  </tbody>
</table>

Bordered table

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

First Name Last Name Username
Mark Otto @mdo
Mark Otto @TwBootstrap
Larry the Bird @twitter 
<table class="table table-bordered">
  <thead>
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr> 
    <tr> 
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Table head options

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat 
<table class="table">
  <thead class="thead-inverse">
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr> 
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr> 
  </tbody>
</table>
First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat 
<table class="table">
  <thead class="thead-default">
    <tr> 
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr> 
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr> 
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr> 
  </tbody>
</table>

Responsive tables

Wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). 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.

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Reflow

Turn traditional tables on their side by using table-reflow. When using reflow, the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc.

Content order and complex tables

Beware that the table-reflow style changes the visual order of content. Make sure that you only apply this style to well-formed and simple data tables (and in particular, don’t use this for layout tables) with appropriate <th> table header cells for each row and column.

In addition, this class will not work correctly for tables with cells that span multiple rows or columns (using rowspan or colspan attributes).

# Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell 
<table class="table table-reflow">
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th> 
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td> 
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td> 
    </tr> 
  </tbody>
</table>