Tables

table

Our default table is simple and uncluttered without vertical borders.

Platform UI tables are built to be responsive at all screen sizes! Make them responsive by adding a data-label on every <td> to match the column header label.

Demo

Menu Item Size Price
Pork Buns Large $8.99
Pork Buns Small $5.99

Markup

<table class="table">
  <thead>
    <tr>
      <th>Menu Item</th>
      <th>Size</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Menu Item">
        Pork Buns
      </td>
      <td data-label="Size">
        Large
      </td>
      <td data-label="Price">
        $8.99
      </td>
    </tr>
    <tr>
      <td data-label="Menu Item">
        Pork Buns
      </td>
      <td data-label="Size">
        Small
      </td>
      <td data-label="Price">
        $5.99
      </td>
    </tr>
  </tbody>
</table>

Modifiers

Modifier † Behavior
table--no-hover Removes the hover effect on tables and rows.
unresponsive Removes responsive behavior.

The base class is always required.

Add the utility class overflow-x--auto to make the table scroll horizontally too! This is a good idea when making the table unresponsive.