Tables

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.

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.

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.

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

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.

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">Nihil magnam</a></th>
        <th>Modi</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Illo voluptates aut</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset sed sit</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="Nihil magnam">Consequatur voluptatibus</th>
        <td data-th="Modi">Eligendi illo ut</td>
        <td data-th="Illo voluptates aut">Distinctio laudantium quo</td>
        <td data-th="Temporibusquoset sed sit">Ut numquam optio</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="Nihil magnam">Accusantium facere</th>
        <td data-th="Modi">Est officiis nemo</td>
        <td data-th="Illo voluptates aut">Voluptatem velit ullam</td>
        <td data-th="Temporibusquoset sed sit">Harum non velit</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="Nihil magnam">Soluta vero</th>
        <td data-th="Modi">Accusantium enim illum</td>
        <td data-th="Illo voluptates aut">Vel laborum rerum</td>
        <td data-th="Temporibusquoset sed sit">Voluptas exercitationem corporis</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

Data table with clickable row highlight

Adding the class .table-responsive--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.