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.

More Information in the WCAG 2.0 Guidelines

H39: Using caption elements to associate data table captions with data tables

H43: Using id and headers attributes to associate data cells with header cells in data tables

H51: Using table markup to present tabular information

H63: Using the scope attribute to associate header cells and data cells in data tables

H73: Using the summary attribute of the table element to give an overview of data tables

H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells

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>
Back to Top

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>
Back to Top

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>
Back to Top

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>
Back to Top

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>
Back to Top

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>
Back to Top