# Make comparison tables usable on small screens

A comparison table needs to preserve the relationship between labels and values on a small screen. Horizontal scrolling can be appropriate when the comparison depends on columns, provided the region is understandable and keyboard accessible. Do not hide important columns merely to make the screenshot fit.

## Keep table semantics
```html
<div class="table-scroll" role="region"
     aria-label="Offer comparison" tabindex="0">
  <table>
    <caption>Written offer terms</caption>
    <thead><tr><th scope="col">Term</th><th scope="col">Offer A</th></tr></thead>
    <tbody><tr><th scope="row">Base salary</th><td>$90,000</td></tr></tbody>
  </table>
</div>
```

```css
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid currentColor; }
table { border-collapse: collapse; min-width: 28rem; }
```

This is a small illustrative pattern. The meaningful headers and caption describe the data; the scroll container lets a narrow viewport retain the table’s structure.

## Choose between scrolling and reshaping
For a table with several options, preserving columns may help comparison. For a record list where each row is independent, cards may work better. If you transform rows into cards, keep the labels visible and verify the reading order. A value without its header becomes ambiguous.

## A fictional failure
A mortgage table displays “$2,400” in a mobile card but drops the “estimated total payment” label. The reader cannot tell whether the amount is principal and interest, cash to close, or a fee. The layout fits, but the comparison no longer works.

## Test the data, not just the width
Use long labels, missing values, and footnotes. Navigate the scroll region with the keyboard and inspect it with assistive technology when possible. Check that sticky columns do not cover neighboring values and that the page itself does not overflow horizontally.

Ask AI to preserve the comparison’s meaning while changing the layout. The goal is not to eliminate every scroll region; it is to keep people able to understand and compare the data without losing context.

---
SkillStall · 2026-10-02
W3C WAI: Tables tutorial: https://www.w3.org/WAI/tutorials/tables/