Table with responsive card layoutStatusdevelopment

An example of how to convert table rows to data cards for smaller devices

Guidance

Tabular data can be difficult to display at smaller breakpoints. The reduced width of mobile screens does not allow space for table rows to stretch out and data can end up looking very compressed, or cutting off to the right of the screen.

One option to handle this is to convert the table rows to data cards for smaller devices. When the correct breakpoint is hit, each table row is displayed as a card instead with the matching table headers being placed appropriately using the CSS 'content' property.

This pattern is good for displaying data without the user having to scroll horizontally - something that isn't naturally instinctive for a user to do. It also allows for more of the data entry to be visible on screen at one time, as the vertical space is almost always much larger on a handheld device.

This pattern only works in a use case where the user does not need to scan a table and make direct visual comparison between the rows. If this is a requirement, you should consider the alterntative overflow table pattern.

Example responsive table

Open in a new tab

<div class="table__container"><table class="table table--has-caption"><caption class="table__caption">Example table</caption><thead class="table__head"><tr class="table__row"><th class="table__th" scope="col">Name</th><th class="table__th" scope="col">Job title</th><th class="table__th" scope="col">Date of birth</th></tr></thead><tbody class="table__bd"><tr class="table__row"><td data-th="Name" class="table__td">Joe Example</td><td data-th="Job title" class="table__td">Web developer</td><td data-th="Date of birth" class="table__td">1 Jan 1970</td></tr><tr class="table__row"><td data-th="Name" class="table__td">Joe Example</td><td data-th="Job title" class="table__td">Web developer</td><td data-th="Date of birth" class="table__td">1 Jan 1970</td></tr><tr class="table__row"><td data-th="Name" class="table__td">Joe Example</td><td data-th="Job title" class="table__td">Web developer</td><td data-th="Date of birth" class="table__td">1 Jan 1970</td></tr></tbody></table></div>

Acceptance criteria

The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the search behaves visually and functionally as expected.

For validation in developer tools / web inspector

The table should contain a
```
<thead>
```
element which wraps a row containing all
```
<th>
```
tags
Each
```
th
```
tag should have an appropriate scope attribute
The table should contain a
```
<tbody>
```
element which wraps all subsequent rows
The table should contain a
```
<caption>
```
element to summarise the table data

For visual validation

At mobile breakpoints, the table rows and cells should convert to vertically stacked cards
Appropriate headings should be visible above each data element

For functional validation

When using a screenreader, the table should not be surfaced differently between breakpoints. The markup should still be available to all table based navigation methods and keyboard shortcuts

UI Patterns