We're currently working on the future of the Design system at Co-op

We'll start talking about this publicly as soon as we can. In the meantime this site will remain up to date with our current design patterns.

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.



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


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


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.