Keep Wide Tables Scrollable Without Breaking Page Reflow

.table-region {
  overflow-x: visible;
}
.comparison { min-width: 640px; }

.table-region {
  max-inline-size: 100%;
  overflow-x: auto;
}
.comparison { min-width: 640px; }

Root cause

Tabular data can require a two-dimensional relationship between row headers, column headers, and cells. That does not mean the entire document needs two-dimensional scrolling. With visible overflow, the table’s minimum width participates in the page’s scrollable area and prevents unrelated content from reflowing within the viewport.

The fixed example retains native table, caption, th, and td elements. Only the table region becomes horizontally scrollable, so the structural relationships remain programmatically available while the surrounding article stays within the page.

Check geometry and relationships together

At a narrow viewport, compare the document and table-region scroll widths. The intended result is zero page overflow and positive local overflow only inside the labeled wrapper. Reach that wrapper with the keyboard, scroll to the last column, and confirm that the focus indicator and caption remain visible. A region that can scroll only by touch or pointer leaves keyboard users without equivalent access.

Use the browser accessibility tree or a screen-reader table command to confirm that the native caption and row and column headers remain associated with their cells. Rebuilding the table as unrelated mobile cards may remove the horizontal scrollbar, but it can also discard the comparison relationships that make the data useful.

When this fix is not enough

A scroll wrapper cannot repair an overly complex table or missing header associations. Consider whether columns can be removed, grouped, or offered in a task-specific alternate view. For more complex multi-level headers, scope alone may not express every association and explicit id and headers values may be needed.

Regression condition

At 320 and 375 CSS pixels, the failing table must produce positive page-level overflow. The fixed page must have zero page overflow, while its labeled table region retains positive local horizontal overflow, accepts keyboard focus, and preserves semantic row and column headers.