1. Horizontal Scrolling
The simplest pattern: wrap the table in overflow-x: auto. The partially visible cut-off column signals scrollability. Gradient shadows on both edges reinforce the affordance. Best when users need to compare data across columns.
| Product | Category | Price | Rating | Stock | Revenue | Growth | Region |
|---|
2. Priority Columns (Pinned First Column)
The identifier column stays fixed via position: sticky; left: 0 while other columns scroll underneath. Uses border-collapse: separate and z-index layering: corner (4) > header (3) > first column (2). NNG's top recommendation for comparison tables.
| Product | Category | Price | Rating | Stock | Revenue | Growth | Region |
|---|
3. Stacked Rows / Card Reformatting
Below 768px, each row becomes a vertical card. <thead> is hidden; td::before with data-label attributes supplies labels. Full ARIA role remediation restores semantics after display: block strips them. Great for independent records; destroys column comparison.
| Product | Category | Price | Rating | Stock | Revenue | Growth | Region |
|---|
4. Column Toggling
Hide non-essential columns behind a checkbox panel. Each column has a data-priority (1–6) controlling auto-hide at breakpoints. Ideal for tables with 8+ columns of mixed importance. Product Name (priority 1) is always visible.
5. Collapse/Expand (Accordion) Rows
Show summary data in each row; tap to expand full details. Progressive disclosure keeps the view compact and scannable. Keyboard accessible: Enter or Space toggles rows. Best for drill-down workflows; makes row comparison impossible.
| Product | Category | Price |
|---|
6. Adaptive Content Reduction + Container Queries
Instead of hiding columns, reduce what's inside cells: abbreviate text, substitute icons, truncate decimals. Uses @container queries (not media queries) so the table responds to its own container width. Drag the resize handle below to see three breakpoints in action. Typography uses cqi units.
↔ Drag the bottom-right corner to resize
| Product | Category | Price | Rating | Stock | Revenue | Growth | Region |
|---|
7. Comparison Mode / Swipeable Columns
Fixed reference column (first product) and one comparison column at a time, with arrow navigation within the data area — not pagination dots. NNG warns dots are "often overlooked." Supports touch swipe.
| Attribute | — | — |
|---|
8. Multi-Row Stacking
Two lines of data per logical row reduce the column count. The Product cell spans both rows via rowspan. Primary row shows financials; secondary row shows metadata. Zebra striping applied to row pairs.
| Product | Price | Revenue | Growth |
|---|---|---|---|
| Category | Stock | Region |
9. Data Selection / Filtering Before Display
Let users choose which columns to see and filter data before rendering the table. Reduces information overload on small screens. Select columns and apply filters, then click "Show Table."
10. "No Table" Pattern
Abandon tabular format entirely for a visualization. The same product data rendered as a horizontal bar chart. Use sparingly — Steven Hoober warns against being "contemptuous of the user's need to view information in a tabular format."
11. CSS Grid with Subgrid
Cards in an auto-fill grid, each using grid-template-rows: subgrid so that name, category, price, and bar chart rows align across cards regardless of content length. Falls back gracefully without subgrid support.
12. Fixed Layout with Ellipsis
table-layout: fixed with explicit column widths via <colgroup>. Long text is truncated with text-overflow: ellipsis. Hover/focus reveals full text via title. Good for controlled density without structural changes.
| Product | Category | Price | Rating | Stock | Revenue | Growth | Region |
|---|