Back to the pattern library

Responsive table

Patterns used for making a table responsive should be appropriate to the data in the table and how users are looking at that data.

This ‘rows become mini-tables’ approach works for a table with different types of values — including text.

More detailed information on how to use table patterns can be found in our design guidance.

Example

Example

HTML

<table class="coop-table-smallscreen--stacked">
    <caption>This table compares our Classic and Select Plus pet insurance</caption>
    <thead>
        <tr>
            <th scope="col">Compare Pet Insurance</th>
            <th scope="col">Classic</th>
            <th scope="col">Select Plus</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Vet fees cover</th>
            <td data-th="Classic">&pound;2000</td>
            <td data-th="Select Plus">&pound;5000</td>
        </tr>
        <tr>
            <th scope="row">Extra treatments</th>
            <td data-th="Classic">Not included</td>
            <td data-th="Select Plus">&pound;750</td>
        </tr>
    </tbody>
</table>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

The responsive table takes the same style as the main table — but differ under 480px by the:

  • heading rows becoming table headers
  • table cell borders are removed

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change