Tables

Table with striped rows

Adding the class table--striped-rows will make the rows striped.

Table with fixed columns width

Adding the class table--fixed-column-width will make the columns equal width - this can look neater.

Finer control of a table

There are some classes that in combination can give you a lot more control of how your table looks.

Borderless table

We can add table-borderless to the surrounding div.

Auto width table

We can add table-auto-width to the surrounding div, so the table sizes itself and is no longer 100% of the page width

Table with row underlining

We can add row-underlining to the table

Snug table

We can add table-snug to the surrounding div to reduce the vertical padding in cells.

Small table

We can add table--small to the surrounding div so the table mimics the dl.list--inline.

Bold text in a column

We can add a class to make text bold in a specific column. This class is added to the surrounding div.

In the following example table-col2-bold had been added to bold the text in the second column.

Align a column's text to the right

We can add a class to align the text to the right in a specific column.

In the following example table-col1-right had been added to right align the text in the first column.

Align a column's text to the centre

We can add a class to align the text to the centre in a specific column.

In the following example table-col2-centre had been added to right align the text in the first column.

Control column widths by %

We can state the percentage widths of the columns by attaching classes to tds.

In the following example column-width--20pc had been added to all the tds that make up the first and second columns. The class column-width--60pc had been added to all the tds that make up the third column.

Available widths are: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90.

It's a good idea for the tds in a row to add up to 100%!

On small screens the widths will revert to auto

Hide table head row

We can hide the top row if the columns are self-explanatory. They will still appear to screen readers.

We do this by adding the class table-hide-head-row to the div surrounding the table.

No table row highlight on hover

We can remove the row highlight on hover for small tables, usually when used in conjunction with table-borderless and table-clear.
A true data table (with lots of numbers, statuses, rows, etc.) needs highlighting.

Add the class table-no-row-hover-highlight to the div surrounding the table.

Data table, responsive list

Adding the class table-responsive--list will render the table as a list at smaller widths. The table headers will not be displayed, so this won't be suitable for a table that has sortable columns.

This table will break to a list view on smaller devices. If you would like it to break sooner you can add the class table-responsive--list--break-at-medium

All cells will need a data-th attribute for the column name. This is used at small screen sizes to identify the cells when displayed as a list.

<!-- START table-data-long-responsive-list component -->
<div class="table-responsive table-responsive--list">
  <table>
    <thead>
      <tr>
        <th class="column-sortable" aria-sort="ascending"><a href="#" class="column-sortable__link column-sortable__link--up">Et cum</a></th>
        <th>Dolor</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Nisi possimus voluptatum</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset saepe est</a></th>
        <th class="column-actions-heading">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Et cum">Vel laudantium</th>
        <td data-th="Dolor">Ratione iste eos</td>
        <td data-th="Nisi possimus voluptatum"><a href="#">Omnis non magni</a></td>
        <td data-th="Temporibusquoset saepe est">Quos odit qui</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</button>
        </td>
      </tr>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Et cum">Quia aut</th>
        <td data-th="Dolor">Deserunt suscipit sapiente</td>
        <td data-th="Nisi possimus voluptatum"><a href="#">Eaque sequi recusandae</a></td>
        <td data-th="Temporibusquoset saepe est">Non suscipit voluptas</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</button>
        </td>
      </tr>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Et cum">Illo velit</th>
        <td data-th="Dolor">Numquam nemo corrupti</td>
        <td data-th="Nisi possimus voluptatum"><a href="#">Aut in et</a></td>
        <td data-th="Temporibusquoset saepe est">Sit iusto nisi</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- END table-data-long-responsive-list component -->

Data table, column select

Choose columns to display

Table with sticky header

This is a progressive enhancement and will not work on all browsers, including IE.

Data table with clickable row highlight

Adding the class .table__active-row to any <tr> will add a hover highlight to the row and change its cursor to a pointer to indicate that it is a clickable link.
The highlight colour will adopt the scheme colour if used.

Data table responsive list with clickable row highlight

Data table with selected row

Adding the class .table__selected-row to any <tr> will highlight the row.

Data table with clickable row highlight and selected row

Adding the class .table__active-row to any <tr> will add a hover highlight to the row and change its cursor to a pointer to indicate that it is a clickable link.

Adding the class .table__selected-row to any <tr> will highlight the row.