Accessible and Responsive Tables

A data table should be understandable when a visitor moves from cell to cell. Use a caption when it helps identify the dataset, mark real headers with th, and set scope for straightforward row or column headers.

For a wide table, horizontal scrolling is often better than squeezing every column until the text becomes unreadable. A common pattern is to wrap the table in a container that can scroll:

<div class="table-scroll" role="region" aria-label="Monthly sales data" tabindex="0">
  <table>
    <caption>Monthly sales by region</caption>
    <!-- table rows -->
  </table>
</div>

CSS can give .table-scroll overflow-x: auto. The tabindex="0" makes the scrollable region keyboard-focusable in browsers where that is needed. Ensure the region has an understandable accessible name.

Be careful when changing a table into cards with CSS; do not destroy the relationships that make the content a table. If the content is not really tabular data, use a list or articles instead.