Accessible Responsive Table

Preserve row and column relationships while keeping wide data reachable.

Course progress

On a narrow screen, focus this region and scroll horizontally to reach every column.

Completed lessons by learner, September cohort
Learner Semantic HTML Forms Tables Total complete
Devi 4 of 4 4 of 4 3 of 4 11 of 12
Jonah 4 of 4 3 of 4 2 of 4 9 of 12
Mei 4 of 4 4 of 4 4 of 4 12 of 12
Group total 12 of 12 11 of 12 9 of 12 32 of 36

Why the wrapper scrolls instead of the table changing display

The table retains its native structure and minimum useful width. Only the surrounding region gets overflow: auto, so users can reach every column without turning cells into unrelated blocks.

Important HTML

Caption names the whole table; scope="col" and scope="row" tell assistive technology which cells each header labels.

<table>
  <caption>Completed lessons by learner, September cohort</caption>
  <thead>
    <tr>
      <th scope="col">Learner</th>
      …
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Devi</th>
      <td>4 of 4</td>
      …
    </tr>
  </tbody>
</table>