Table with scrolling overflowStatusdevelopment

An example of markup and styling for a scrollable table wrapper

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 wrap the table in a container. This container is styled to scroll horizontally when it needs to, while keeping the rest of the page contained within the screen width.

This pattern is best used when the tabular data needs to be scanned by the user in the context of the other rows around it. It allows for easier visual comparison between table row entries.

If this is not necessary, you may wish to consider the alterntative responsive card table pattern.

Example with scrolling overflow

Open in a new tab

<div class="table__container table__container--overflow" tabindex="0" aria-labelledby="scrolltableCaption"><table class="table table--has-caption"><caption id="scrolltableCaption" 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>

Example with scrolling overflow and sticky column

Open in a new tab

<div class="table__container table__container--overflow table__container--overflow-sticky" tabindex="0" aria-labelledby="scrolltableStickyCaption"><table class="table table--has-caption"><caption id="scrolltableStickyCaption" 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

There should be an HTML
```
<div>
```
element with a container class as the immediate parent of the table
The container
```
<div>
```
element should have a
```
tabindex="0"
```
attribute to allow for keyboard access
The container
```
div
```
element should have an
```
aria-labelledby
```
attribute which matches the id of the table caption
The table should contain a
```
<thead>
```
element which wraps a row containing
```
<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 and title the table
The
```
<caption>
```
element should have an id which matches the
```
aria-labelledby
```
attribute on the scrollable container

For visual validation

At mobile breakpoints the table cells should continue to have a comfortable amount of whitespace and not become too compressed
At mobile breakpoints the table container should have some visual indication that the area is scrollable, such as a scrollbar, shadow or icon

UI Patterns