Responsive tables beta

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.

Example

Example

This table compares our Classic and Select Plus pet insurance
Compare Pet Insurance Classic Select Plus
Vet fees cover £2000 £5000
Extra treatments Not included £750

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>

                            

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

For the styles to work correctly, you must match the markup structure in the example. When deciding whether to use this solution think carefully about if it will fit the needs of your users. If in doubt don’t use it, or build your own responsive table. We have made this solution as simple as possible and cannot varify its accessibility yet on smaller device size. Please research your service with users of all abilities.

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