UI Components

Tables

Contents

Basic Example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we’ve opted to isolate our custom table styles.

Optional table caption.
# First Name Last Name Username
1 Jimmy Dempsey @thejamesdempsey
2 Matt Gasior @mattgasior
3 Jonathan Clark @jclarkcreative 
<table class="table">
      <caption>Optional table caption.</caption>
      <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>Jimmy</td>
          <td>Dempsey</td>
          <td>@thejamesdempsey</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Matt</td>
          <td>Gasior</td>
          <td>@mattgasior</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Jonathan</td>
          <td>Clark</td>
          <td>@jclarkcreative</td>
        </tr>
      </tbody>
    </table>

Striped rows

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

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

# First Name Last Name Username
1 Jimmy Dempsey @thejamesdempsey
2 Matt Gasior @mattgasior
3 Jonathan Clark @jclarkcreative 
<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>Jimmy</td>
      <td>Dempsey</td>
      <td>@thejamesdempsey</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Matt</td>
      <td>Gasior</td>
      <td>@mattgasior</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jonathan</td>
      <td>Clark</td>
      <td>@jclarkcreative</td>
    </tr>
  </tbody>
</table>

Bordered table

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

# First Name Last Name Username
1 Jimmy Dempsey @thejamesdempsey
2 Matt Gasior @mattgasior
3 Jonathan Clark @jclarkcreative 
<table class="table  table-bordered">
  <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>Jimmy</td>
      <td>Dempsey</td>
      <td>@thejamesdempsey</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Matt</td>
      <td>Gasior</td>
      <td>@mattgasior</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jonathan</td>
      <td>Clark</td>
      <td>@jclarkcreative</td>
    </tr>
  </tbody>
</table>

Hover rows

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

# First Name Last Name Username
1 Jimmy Dempsey @thejamesdempsey
2 Matt Gasior @mattgasior
3 Jonathan Clark @jclarkcreative 
<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>Jimmy</td>
      <td>Dempsey</td>
      <td>@thejamesdempsey</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Matt</td>
      <td>Gasior</td>
      <td>@mattgasior</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jonathan</td>
      <td>Clark</td>
      <td>@jclarkcreative</td>
    </tr>
  </tbody>
</table>

Condensed table

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

# First Name Last Name Username
1 Jimmy Dempsey @thejamesdempsey
2 Matt Gasior @mattgasior
3 Jonathan Clark @jclarkcreative 
<table class="table  table-condensed">
  <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>Jimmy</td>
      <td>Dempsey</td>
      <td>@thejamesdempsey</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Matt</td>
      <td>Gasior</td>
      <td>@mattgasior</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jonathan</td>
      <td>Clark</td>
      <td>@jclarkcreative</td>
    </tr>
  </tbody>
</table>

Responsive tables

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.

Firefox and fieldsets>

Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide:


@-moz-document url-prefix() {
    fieldset { display: table-cell; }
}
For more information, read this Stack Overflow answer
# 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
3 Table cell Table cell Table cell Table cell Table cell Table cell 
<div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</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>
            <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>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
Menu