# Mobile Data Tables

A complete interactive demo of every responsive table pattern, CSS technique, and accessibility requirement. Resize your browser or view on mobile to see each pattern in action.

## 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 catalog — scroll horizontally to see all 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 catalog with pinned first column
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 catalog — reformats to cards on narrow screens
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.

Product catalog with toggleable columns

## 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 catalog — click rows to expand details
| 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

Adaptive content table — resize container to see content reduction
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.

2 of 12

Product comparison — use arrows to browse products
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 catalog with multi-row stacking
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."

Columns
Category
Min Price
Max Price

## 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."

Metric

## 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 catalog with fixed column widths and ellipsis overflow
Product | Category | Price | Rating | Stock | Revenue | Growth | Region
--- | --- | --- | --- | --- | --- | --- | ---