Dark mode table

Captioned table with a lifted header row, alternating body stripes, and tabular numbers in the last column.

API usage
Route	p95 latency
/v1/users	42ms
/v1/events	118ms
/v1/health	6ms

Widely Supported

colorno-js

Quick implementation

.dmt-table { border-collapse: collapse; width: 100%; }
.dmt-table th { background: oklch(0.22 0.04 265); }
.dmt-table tbody tr:nth-child(even) { background: oklch(0.18 0.03 265 / 0.65); }
.dmt-table td:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

Prompt this to your LLM

Sortable headers and responsive card fallback.

You are styling a read-only data table for a dark admin UI.

Goal: Zebra rows, distinct header background, borders in oklch with alpha.

Technical constraints:
- Use scope="col" on th; caption describes the table.
- Right-align numeric columns with tabular-nums.

Return HTML + CSS.

Why this matters in 2026

Analytics views are table-heavy; subtle striping beats heavy grid lines that flicker on scroll.

The logic

Header sits one step above zebra rows so sort affordances (future icons) have a stable base.

Accessibility & performance

Semantic table markup preserves screen-reader table navigation; horizontal scroll is on the wrapper for narrow viewports.