Skip to content

CSS Showcase · Live Demo

Tables that scale.

Data table layouts with clickable column sorting — sticky headers, dense rows, grouped subtotals, horizontal scroll, and stacked mobile cards.

Featured demo

mobile · stacked-cards

Aurora Kit

SKUAUR-001
Stock128
Price$42.00

Basalt Chair

SKUBAS-014
Stock12
Price$189.50

Comet Lamp

SKUCOM-233
Stock64
Price$58.99

Drift Mug

SKUDRI-091
Stock340
Price$14.25

Ember Rug

SKUEMB-007
Stock8
Price$220.00

mobile design patterns

table-stacked-cards.css
/* Stacked label/value cards for mobile */
.table-card {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.table-card .field {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.15rem;
}

.table-card .field .label {
  color: var(--muted-foreground);
}

CSS features used

  • • position: sticky headers/columns
  • • color-mix() zebra tints
  • • tabular-nums alignment
  • • overflow-x auto scrolling
  • • group hover reveal
  • • Semantic tokens

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.