Back to the pattern library

Responsive tables

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
This table shows compares points earnings in 2018 and 2019
Partner 2018 2019
Co-op Food 709.09 654.45
Co-op Insurance 49.99 52.35
Points total 759.08 706.80
This table lists the 10 most recent times that you’ve earned Co‑op rewards
Date and time For you Dividend points
8 February 2021, 9:00pm 3.75
7 February 2021, 7:28pm 12.10
7 February 2021, 7:28pm -£0.09
1 February 2021, 1:40pm £0.05 8.50
3 January 2021, 4:45pm £0.04 12.65
3 January 2021, 4:45pm -£0.29
27 January 2021, 9:10pm £0.29 45.28
27 January 2021, 9:10pm -£0.37
24 January 2021, 2:50pm £0.12 12.70
23 January 2021, 5:13pm £0.05 2.98

HTML

                                    
<div class="coop-table-wrapper">
  <table class="coop-table coop-table--stackable">
    <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" role="rowheader">Vet fees cover</th>
        <td role="cell" data-heading="Classic">£2000</td>
        <td role="cell" data-heading="Select Plus">£5000</td>
      </tr>
      <tr>
        <th scope="row" role="rowheader">Extra treatments</th>
        <td role="cell" data-heading="Classic">Not included</td>
        <td role="cell" data-heading="Select Plus">£750</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="coop-table-wrapper">
  <table class="coop-table coop-table--stackable">
    <caption class="coop-table__caption">
      This table shows compares points earnings in 2018 and 2019
    </caption>
    <thead>
      <tr class="coop-table__row">
        <th class="coop-table__header" scope="col">Partner</th>
        <th class="coop-table__header coop-table__header--numeric" scope="col" align="right" width="15%">2018</th>
        <th class="coop-table__header coop-table__header--numeric" scope="col" align="right" width="15%">2019</th>
      </tr>
    </thead>
    <tbody>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">Co-op Food</th>
        <td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2018">709.09</td>
        <td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2019">654.45</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">Co-op Insurance</th>
        <td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2018">49.99</td>
        <td class="coop-table__cell coop-table__cell--numeric" role="cell" data-heading="2019">52.35</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="coop-table__row">
        <th class="coop-table__footer" scope="row" role="rowheader">Points total</th>
        <td class="coop-table__footer coop-table__footer--numeric" role="cell" data-heading="2018">759.08</td>
        <td class="coop-table__footer coop-table__footer--numeric" role="cell" data-heading="2019">706.80</td>
      </tr>
    </tfoot>
  </table>
</div>

<div class="coop-table-wrapper">
  <table class="coop-table coop-table--stackable">
    <caption class="coop-table__caption">
      This table lists the 10 most recent times that you’ve earned Co‑op rewards
    </caption>
    <thead>
      <tr class="coop-table__row">
        <th class="coop-table__header coop-t-nowrap" scope="col">Date and time</th>
        <th class="coop-table__header coop-table__footer--numeric coop-t-nowrap" scope="col" align="right" width="15%">For you</th>
        <th class="coop-table__header coop-table__footer--numeric coop-t-nowrap" scope="col" align="right" width="25%">Dividend points</th>
      </tr>
    </thead>
    <tbody>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">8 February 2021, 9:00pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you"></td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">3.75</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">7 February 2021, 7:28pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you"></td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">12.10</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">7 February 2021, 7:28pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">-£0.09</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points"></td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">1 February 2021, 1:40pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.05</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">8.50</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">3 January 2021, 4:45pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.04</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">12.65</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">3 January 2021, 4:45pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">-£0.29</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points"></td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">27 January 2021, 9:10pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.29</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">45.28</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">27 January 2021, 9:10pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">-£0.37</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points"></td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">24 January 2021, 2:50pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.12</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">12.70</td>
      </tr>
      <tr class="coop-table__row">
        <th class="coop-table__cell" scope="row" role="rowheader">23 January 2021, 5:13pm</th>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="For you">£0.05</td>
        <td class="coop-table__cell coop-table__cell--numeric coop-t-nowrap" role="cell" data-heading="Dividend points">2.98</td>
      </tr>
    </tbody>
  </table>
</div>

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.

Is there anything wrong with this page?