Tables#

Tables include default styles for tables and data sets.

Add the table class to any <table> element. The class will add padding, border and emphasized table header.

<table class="table">
  <thead>
    <tr>
      <th>name</th>
      <th>genre</th>
      <th>release date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

Striped tables#

Add the table-striped class to <table> to highlight odd rows. For hoverable table rows, you can add the table-hover class to enable hover style.

Use the active class to make <tr> element highlighted. Use the table-striped-even to highlight even rows instead of odd.

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>name</th>
      <th>genre</th>
      <th>release date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>The Shawshank Redemption</td>
      <td>Crime, Drama</td>
      <td>14 October 1994</td>
    </tr>
  </tbody>
</table>

Secondary Headings#

<th> elements inside of a <tbody> will get a secondary heading treament.

<table class="table table-striped">
  <thead>
    <tr>
      <th colspan="3">Tire</th>
      <th colspan="4">Wheel</th>
      <th>Lug</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">OE Size</th>
      <th>Serv Desc</th>
      <th>Bolt</th>
      <th>Diameter</th>
      <th>Width</th>
      <th>Hub</th>
      <th>Thread</th>
    </tr>
    <tr>
      <td>F</td>
      <td rowspan="2">275/55R20</td>
      <td rowspan="2">111T</td>
      <td rowspan="2">6 x 135mm</td>
      <td>17" - 24"</td>
      <td>5" - 8"</td>
      <td rowspan="2">87.1mm</td>
      <td rowspan="2">14mm x 1.5 Nut</td>
    </tr>
    <tr>
      <td>R</td>
      <td>17" - 24"</td>
      <td>5" - 8"</td>
    </tr>
  </tbody>
</table>

Responsive tables#

Wrap your table with a table-responsive element to make it respond by scrolling vertically and horizontally. The table will automatically get a max-height, adjust it max-height as needed.

The th cells in your table's thead will become fixed when the table overflows its height. Browsers without position: sticky support will fallback to no sticky-headers. While printing overflow and max-height will be reset. Add the table-sticky-column to every <th> and <td> in a column make the column sticky as well.

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th class="table-sticky-column">name</th>
        <th>genre</th>
        <th>release date</th>
      </tr>
    </thead>
    <tbody>
      <tr class="active">
        <td class="table-sticky-column">The Shawshank Redemption</td>
        <td>Crime, Drama</td>
        <td>14 October 1994</td>
      </tr>
    </tbody>
  </table>
</div>

Mini tables#

Add the table-mini class to any <table> element. The class will reduce font sizes and padding, and remove the header background.

<table class="table table-mini table-striped-even">
  <thead>
    <tr>
      <th></th>
      <th>Min</th>
      <th>Max</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Width</th>
      <td>5"</td>
      <td>7"</td>
    </tr>
    <tr>
      <th>Diameter</th>
      <td>16"</td>
      <td>21"</td>
    </tr>
  </tbody>
</table>