CSS data tables: preserve headers when columns get narrow

How the rule works

An audit table shows case ID, owner, state, and last action. Keep the table in semantic markup with headers and a caption. Place it in a scrolling wrapper when the available width cannot show every column legibly. A minimum table width makes the overflow deliberate; the wrapper exposes the horizontal scroll. Table-layout: fixed can make column calculation predictable when widths are specified, yet long names still require wrapping or a detail view. Do not convert every cell to a block merely to avoid scrolling: that can make cross-row comparisons and header associations harder to follow. Check keyboard scrolling, focus inside the wrapper, long identifiers, and print output with all columns present.

.audit-table-scroll { overflow-x: auto; max-inline-size: 100%; }
.audit-table { inline-size: 100%; min-inline-size: 44rem; border-collapse: collapse; }
.audit-table th, .audit-table td {
  padding: .65rem .8rem;
  border-block-end: 1px solid #c6d0da;
  text-align: start;
}
.audit-table td { overflow-wrap: anywhere; }

Cost and verification

A wide table can impose layout and paint work proportional to its row and cell count. Paginate large data sets instead of assuming overflow is the only cost. The wrapper's scrollbar needs to remain discoverable, and focus should not land in an offscreen cell without moving the scroll position. On paper, remove the narrow-screen minimum if it causes clipping; inspect the printed result rather than extrapolating from screen styling. CSS does not provide sorting or data export, so the UI must not promise those features without working controls.

Common Mistakes

• Do not hide required columns solely to fit a phone width.
• Do not use CSS order to change the relation between headers and cells.
• Do not treat a scrollable table as an excuse to render thousands of rows.

Connected lessons

• CSS Type and Media
• CSS overflow: contain long data without losing controls
• CSS print styles: preserve the record and remove screen-only controls
• HTML data tables: name row and column relationships explicitly

Related behavior

• CSS cursor: match the pointer cue to a real action

Further rendering decisions

• CSS font-variant-numeric: keep changing values aligned