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.