Table

‹ Back

Basic, unstyled table:

First Name Last Name
Jane Doe 
<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Spacing

Adding spacing can be done with the table class. This will add padding around each cell and expand the table out to 100% width.

First Name Last Name
Jane Doe 
<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

If you want to remove the left/right padding on the first and last columns you can do so by adding the table__flush class.

First Name Last Name
Jane Doe 
<table class="table table__flush">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Row styling

You can add borders between rows with table__bordered:

First Name Last Name
Jane Doe
Jane Doe
Jane Doe 
<table class="table table__flush table__bordered">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Zebra striping can be implemented by adding the class table__striped:

First Name Last Name
Jane Doe
Jane Doe
Jane Doe 
<table class="table table__striped">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Row highlighting can be added with table__highlight

First Name Last Name
Jane Doe
Jane Doe
Jane Doe 
<table class="table table__striped table__highlight">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Responsive tables

You can make your table stack with the class table__stack, you will also need to indicate which elements hide by giving them the data-table-column-headings attribute. Then duplicate the headings down to the cells with the data-table-heading attribute.

First Name Last Name
Jane Doe
Jane Doe
Jane Doe 
<table class="table table__striped table__stack">
  <thead data-table-column-headings>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-table-heading="First Name">Jane</td>
      <td data-table-heading="Last Name">Doe</td>
    </tr>
    <tr>
      <td data-table-heading="First Name">Jane</td>
      <td data-table-heading="Last Name">Doe</td>
    </tr>
    <tr>
      <td data-table-heading="First Name">Jane</td>
      <td data-table-heading="Last Name">Doe</td>
    </tr>
  </tbody>
</table>

If you have a wide table but can't really stack it you can add a .table-container element around your table to make it scrollable:

First Name Last Name
Jane Doe
Jane Doe
Jane Doe 
<div class="table-container">
  <table class="table table__striped" style="width: 180%">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </tbody>
  </table>
</div>