Responsive Tables

title: "Responsive Tables — Making Data Tables Usable on Mobile" description: "Learn how to make data tables responsive and accessible on mobile devices using horizontal scroll, column collapsing, and stacked layouts." weight: 9 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, tables]

Responsive tables adapt to small screens while maintaining accessibility through horizontal scrolling, column prioritization, or stacked row layouts.

## What You'll Learn

How to make data tables responsive without breaking accessibility or losing header associations.

## Why It Matters

On mobile screens, wide tables overflow the viewport. Users must scroll both horizontally and vertically, which is disorienting.

## Real-World Use

A user on a phone views a product comparison table. The table scrolls horizontally within its container. The header row is sticky so the user always sees the column labels.

## Horizontal Scroll

```html
<div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
  <table>
    <caption>Feature comparison</caption>
    <thead>
      <tr>
        <th scope="col">Feature</th>
        <th scope="col">Basic</th>
        <th scope="col">Pro</th>
        <th scope="col">Enterprise</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Users</th>
        <td>1</td>
        <td>10</td>
        <td>Unlimited</td>
      </tr>
    </tbody>
  </table>
</div>

CSS for Scrollable Table

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-container table {
  min-width: 600px; /* Prevent squeezing on small screens */
}

/* Sticky first column on mobile */
@media (max-width: 768px) {
  .table-container th:first-child,
  .table-container td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
}

Common Mistakes

1. Table squeezed instead of scrolled

Do not let tables shrink columns below readable width. Set a min-width and wrap in a scrollable container.

2. No sticky headers on scroll

Row headers (first column) should be sticky when horizontally scrolling.

3. Stacked layout breaks header associations

Converting rows to cards must maintain header references using data-label attributes.

4. Touch scrolling not smooth

Use -webkit-overflow-scrolling: touch for smooth iOS scrolling.

5. Keyboard scroll not supported

Users must be able to scroll the table container using keyboard. Focusable content inside the table enables keyboard scroll.

Practice Questions

1. What CSS property enables horizontal scrolling for tables? overflow-x: auto on a wrapper div around the table.

2. Why should you set a min-width on responsive tables? To prevent columns from shrinking to unreadable widths. The table scrolls horizontally instead.

3. What is the sticky first column pattern? Using position: sticky on the first column to keep row labels visible during horizontal scroll.

Challenge: Create a pricing table with 5 columns that scrolls horizontally on mobile. Make the first column sticky.

FAQ

Mini Project

Create a responsive table that scrolls horizontally on mobile. Use a wrapper with overflow-x: auto, set a min-width, and make the first column sticky.

What's Next

Learn about Data Table vs Layout Table and when to use tables for data versus layout.