UI Toolkit

Tables

Tabular information should always be presented using a table that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

Basic Table Requires MAX Custom Bootstrap Stylesheet

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.

# First Name Last Name Username
1 Barack Obama potus
2 Michelle Obama flotus
3 Joe Biden vp
<table class="table">
  <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>Barack</td>
      <td>Obama</td>
      <td>potus</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Michelle</td>
      <td>Obama</td>
      <td>flotus</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Joe</td>
      <td>Biden</td>
      <td>vp</td>
    </tr>
  </tbody>
</table>

Striped Rows Requires MAX Custom Bootstrap Stylesheet

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

# First Name Last Name Username
1 Barack Obama potus
2 Michelle Obama flotus
3 Joe Biden vp

Cross-Browser Compatibility

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

<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>Barack</td>
      <td>Obama</td>
      <td>potus</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Michelle</td>
      <td>Obama</td>
      <td>flotus</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Joe</td>
      <td>Biden</td>
      <td>vp</td>
    </tr>
  </tbody>
</table>

Bordered Table Requires MAX Custom Bootstrap Stylesheet

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

# First Name Last Name Username
1 Barack Obama potus
2 Michelle Obama flotus
3 Joe Biden vp
<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>Barack</td>
      <td>Obama</td>
      <td>potus</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Michelle</td>
      <td>Obama</td>
      <td>flotus</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Joe</td>
      <td>Biden</td>
      <td>vp</td>
    </tr>
  </tbody>
</table>

Hover Rows Requires MAX Custom Bootstrap Stylesheet

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

# First Name Last Name Username
1 Barack Obama potus
2 Michelle Obama flotus
3 Joe Biden vp
<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>Barack</td>
      <td>Obama</td>
      <td>potus</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Michelle</td>
      <td>Obama</td>
      <td>flotus</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Joe</td>
      <td>Biden</td>
      <td>vp</td>
    </tr>
  </tbody>
</table>

Condensed Table Requires MAX Custom Bootstrap Stylesheet

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

# First Name Last Name Username
1 Barack Obama potus
2 Michelle Obama flotus
3 Joe Biden vp
<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>Barack</td>
      <td>Obama</td>
      <td>potus</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Michelle</td>
      <td>Obama</td>
      <td>flotus</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Joe</td>
      <td>Biden</td>
      <td>vp</td>
    </tr>
  </tbody>
</table>

Responsive Tables Requires MAX Custom Bootstrap Stylesheet

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# First Name Last Name Username City State ZIP Code
1 Barack Obama potus Washington DC 20500
2 Michelle Obama flotus Washington DC 20500
3 Joe Biden vp Washington DC 20392

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.

<div class="table-responsive">
  <table class="table">
    <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>Barack</td>
        <td>Obama</td>
        <td>potus</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Michelle</td>
        <td>Obama</td>
        <td>flotus</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Joe</td>
        <td>Biden</td>
        <td>vp</td>
      </tr>
    </tbody>
  </table>
</div>