tables

Tables

There's some basic styling applied to table tags and children to make it more browser-friendly, but there's also several classes to help define some basic UX-ready tables. Many of these classes can be combined or nested as needed.

Default table
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table>
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table Footer 1</td>
      <td>Table Footer 2</td>
      <td>Table Footer 3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
  </tbody>
</table>
Unstyled table
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class='table-unstyled'>
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Table Footer 1</td>
      <td>Table Footer 2</td>
      <td>Table Footer 3</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
  </tbody>
</table>
Zero padding
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-nopad">
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
XS padding
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-xs">
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
SM padding
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-sm">
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
lg padding
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-lg">
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
Bordered table
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-bordered">
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
Striped table
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-striped">
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
Striped columns
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-striped-column">
  <col>
  <col>
  <col>
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
Striped both
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-striped-column table-striped table-hover">
  <col>
  <col>
  <col>
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
Hoverable table rows
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<table class="table-hover">
  <thead>
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
    <th>Table Header 3</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Table Footer 1</td>
    <td>Table Footer 2</td>
    <td>Table Footer 3</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  <tr>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
    <td>Table Body 1</td>
  </tr>
  </tbody>
</table>
Striped and hoverable for dark backgrounds

ProTip: use the "full-width" utility class to force a table to extend the width of its container.

Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1

Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
Table Body 1 Table Body 1 Table Body 1
Table Body 1 Table Body 1 Table Body 1
<div class="p1 skin-gray-dark">
  <p> ProTip: use the "full-width" utility class to force a table to extend the width of its container.
  <table class="table-striped-dark full-width">
    <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
      <td>Table Footer 1</td>
      <td>Table Footer 2</td>
      <td>Table Footer 3</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
    </tbody>
  </table>
  <hr/>

  <table class="table-hover-dark">
    <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
      <td>Table Footer 1</td>
      <td>Table Footer 2</td>
      <td>Table Footer 3</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
    <tr>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
      <td>Table Body 1</td>
    </tr>
    </tbody>
  </table>
</div>

Customizing tables

Overwrite these variables in _custom_variables.scss to change these defaults.

$table-cell-pad:           1rem 1rem !default;
$table-cell-condensed-pad: 0.5rem 0.5rem !default;

$table-bg:             transparent !default;
$table-header-border:  rgba(0, 0, 0, 0.1) !default;
$table-footer-border:  rgba(0, 0, 0, 0.1) !default;
$table-header-bg:      transparent !default;
$table-footer-bg:      transparent !default;
$table-cell-border:    rgba(0, 0, 0, 0.1) !default;
$table-stripe-color:   #F0F0F0 !default;
$table-hover-color:    #E7E7E7 !default;
$table-border-color:   rgba(0, 0, 0, 0.1) !default;
$table-vertical-align: middle !default;

$table-stripe-dark-color: rgba(255, 255, 255, 0.1) !default;
$table-hover-dark-color:  rgba(255, 255, 255, 0.2) !default;