CSS audit table project: responsive records without dropped columns

How the rule works

Start with cell padding and a visible row boundary. The table's minimum inline size keeps four columns legible on a desktop; its wrapper provides access on a narrow display. A state badge may have color, but the state word remains in the cell. At print time, remove the narrow minimum so the table can fit the page, then inspect a multipage record with long text. CSS cannot create server-side pagination or CSV export; those require real features. Keep the source order of columns stable so a reader can compare rows without decoding a card transformation. Test a long case identifier, translated owner name, empty cell, keyboard traversal, and 200% zoom before treating the layout as complete.

.audit-log__scroll { max-inline-size: 100%; overflow-x: auto; }
.audit-log { inline-size: 100%; min-inline-size: 46rem; border-collapse: collapse; }
.audit-log th, .audit-log td {
  padding: .7rem .9rem;
  border-block-end: 1px solid #c6d0da;
  text-align: start;
  vertical-align: top;
}
.audit-log td { overflow-wrap: anywhere; }
@media print { .audit-log { min-inline-size: 0; } }

Cost and verification

The cost grows with row count and with long text that changes column measurement. Paginate large logs; do not render thousands of rows and then blame the scrollbar for slow interaction. The rule set adds no request, but a real product still needs data transport, caching, and authorization. Print treatment can produce awkward page breaks, so inspect the actual PDF or paper output with representative data. The table's HTML header associations remain the source of meaning; CSS only changes the spatial arrangement.

Common Mistakes

• Do not hide an evidence column because a phone is narrow.
• Do not imply that a styled table has working sort or export controls.
• Do not assume a screen screenshot verifies the print layout.

Connected lessons

• CSS Projects
• CSS data tables: preserve headers when columns get narrow
• CSS print styles: preserve the record and remove screen-only controls
• HTML data tables: name row and column relationships explicitly