Tables

Build tables with the table class, then layer on modifiers for stripes, hover states, borders, cell spacing, dark or color-1 accents, sizing, sticky headers, and scroll affordances — no custom CSS required.

Default Table

Add the class table to the table element to get the default style.

Striped Table

Add the classes table table-striped.

Striped Table Color-1

Add the classes table table-striped-color-1.

Hover Table

Add the classes table table-hover.

Hover Table Color-1

Add the classes table table-hover-color-1.

Bordered Table

Add the classes table table-bordered.

Bordered Table Color-1

Add the classes table table-bordered-color-1.

Cell Separate Table

Add the class table table-cell-separate (or table-cell-separate-color-1), optionally with table-cell-border-none.

Cell Separate Color-1, No Cell Borders

Dark Header / Footer / First & Last Column

Combine table-dark-header, table-dark-footer, table-dark-1st-col, table-dark-last-col — or the table-color-1-* equivalents for an accent tint.

Color-1 Header / Footer

Table Height

Add table-compact, or table-large-2x through table-large-5x, to control row height.

Table Large 2x, with Fixed Cell Height

For fixed-height cells with independent scrolling, wrap the cell content in a div using mh-1rem through mh-10rem, plus overflow-y-auto, overflow-y-scroll, or overflow-hidden.

Responsive & Fixed-Layout Table

Wrap the table in a div with overflow-x-auto so wide tables scroll horizontally on small screens instead of breaking layout. Add table-layout-fixed plus table-td-w-5rem / table-td-w-10rem / table-td-w-15rem for predictable column widths.

Sticky Table Header

Give the container a bounded height with overflow-y-auto, then add position-sticky top-0 z-2 to the header cells. Because table-dark-header / table-color-1-header already paint an opaque background on th, the header stays legible as rows scroll beneath it. For an un-tinted header, pair position-sticky top-0 z-2 with bg-panel so the sticky cells don't turn transparent over the scrolling body.

Sticky Dark Header

Sticky Neutral Header (Color-1 accent text)

Floating Scroll Buttons — All Directions

For tables too wide and too tall to see at a glance, anchor circular button controls to the corners of a position-relative wrapper with position-absolute plus top-1, bottom-1, left-1, or right-1. Each button calls the container's native scrollTo — no framework JavaScript required, this is a page-level enhancement.