Responsive tables beta

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