Table

To add the default spacing to a table, use the class table.

First name	Last name
John	Doe
Jane	Doe

<table class="table">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Table Cell Padding

Adjust the padding of table cells by adding one of the following modifier classes: table--sm or table--xs

First name	Last name
John	Doe
Jane	Doe

<table class="table  table--sm">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Table Cell Borders

Add borders to table cells by adding the modifier class: table--bordered

First name	Last name
John	Doe
Jane	Doe

<table class="table  table--sm  table--bordered">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Zebra Stripes

Add stripes to table rows with the modifier class: table--striped

First name	Last name
John	Doe
Jane	Doe

<table class="table  table--sm  table--bordered  table--striped">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Equal-width Table Cells

Force all cells within a table to occupy the same width as each other with the modifier class: table--fixed

First name	Last name
John	Doe
Jane	Doe

<table class="table  table--sm  table--bordered  table--striped  table--fixed">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Responsive Table

Make a table friendlier on a mobile device with the modifier class: table--responsive. This takes effect on the medium breakpoint and below.

First name	Last name
John	Doe
Jane	Doe

<table class="table  table--sm  table--bordered  table--striped  table--responsive">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>