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.
<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">£2000</td> <td data-th="Select Plus">£5000</td> </tr> <tr> <th scope="row">Extra treatments</th> <td data-th="Classic">Not included</td> <td data-th="Select Plus">£750</td> </tr> </tbody> </table>
The styles for this pattern can be found in the foundations on github.
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
We are currently working on this.
Suggest a pattern
Use this form to suggest a new pattern or a change to an existing one.