Never make people scroll sideways

How to do it

Let tables reflow instead of scroll. In a narrow container (a container query), stack each row and show each cell's column name from a data-label attribute. Wrap code with white-space: pre-wrap; overflow-wrap: anywhere. Wrap navigation rows. If one swipeable row works better on phones, hide its scrollbar and fade the edge, so people see there is more. Make the build reject any overflow-x: auto or scroll rule that does not also hide the scrollbar.

Example

.table-wrap { container-type: inline-size; }
@container (max-width: 30rem) {
  .table tr, .table td { display: block; }
  .table thead { display: none; }
  .table td::before { content: attr(data-label) ": "; font-weight: 600; }
}
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tabs { overflow-x: auto; scrollbar-width: none; }

How to check

Open every sitemap URL in a browser at 320 px and at desktop width. Fail if document.documentElement.scrollWidth is wider than the window. Also fail if any overflow-x: auto element has scrollWidth > clientWidth and a visible scrollbar. axe scrollable-region-focusable passes.

Measured

On a reference site, this check covered 227 pages at two widths. It found 0 problems after the change.