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