Table

Basic

Wrap your data in .table. The first and last column cells line up with the card body gutter so a table drops into a .card flush. (Trailing columns use the text-end utility.)

Row variants

Add .table__row--{intent} to a <tr> (primary, success, info, warning, danger) or --neutral for a quiet emphasis.

Striped rows

Add .table--striped to zebra-stripe every other row in the body.

Striped columns

Use .table--striped-cols when the table reads column-first.

Hoverable and active row

.table--hover highlights the row under the cursor; flag a persistent selection with data-state="active" on the <tr> (highlight tier, like sidebar / list-group). Hover composes over stripes and variants without erasing them.

Grid

.table--grid draws a border on every side of every cell.

Seamless

.table--seamless strips every row and cell border for a soft list look.

Small

.table--sm shrinks inner cell padding for denser rows. The edge padding stays so the flush-in-card alignment holds.

Vertical alignment

Cell content sits at the top by default. Add .table--align-middle when rows mix multi-line text with shorter values.

Header alt and sortable

.table__head--alt opts the header onto the alt surface. Wrap a header label in .table__sort (a <button> or <a>) for a sort control with a CSS-drawn caret; set data-state="asc|desc" on the active column and mirror it with aria-sort on the <th>.

Caption and group divider

A <caption> reads like a footnote below the table. Add .table__body--divider to a <tbody> for a heavier rule above it.

With status badges

Drop a .badge into a cell to flag state. Soft .badge--soft variants read cleaner inside a dense row than solid fills.

With user avatars

Stack an <img> and a <div> in a flex cell to pair an avatar with a name and a secondary line. Pair with .table--align-middle so single-line cells center against the taller avatar rows.

Row actions

Trailing buttons go in the last cell with text-end. Ghost icon buttons sit quiet until the row is hovered.

Selectable rows

Put a .checkbox in the first column. Flag selected rows with data-state="active". (The bulk select-all wiring is the deferred JS layer; the checked + active states are shown statically.)

Pair with a header that surfaces the bulk count and actions once a row is checked. (The live count and select-all wiring is the deferred JS layer; the checked + active states are shown statically.)

Inside a card

Drop the table straight into a .card and it sits flush on its own: the corner cells round to the card and the doubled border falls away. Edge cells line up with the card header's gutter.

Grid, inside a card

A .table--grid dropped straight into a .card drops its outer perimeter so it doesn't double the card border, and rounds the corner cells to the card. With no card header above, the top corners round too.

Full dashboard table

Composes everything above. Alt-surface header, avatars in the first cell, badges for status, row actions trailing.

Responsive

Wrap the table in .table-responsive when it might overflow narrow viewports — the wrapper scrolls horizontally; the table stays unchanged. For breakpoint-scoped scrolling, use .table-responsive-{sm|md|lg|xl|2xl}.

Customization

These variables retune .table. Override on the table, a parent scope, or :root. The cell paint chain reads --table-bg-state (hover/active) over --table-bg-type (variant/striped) over --table-bg, so hover lights a striped row without erasing the stripe.

Geometry

Head and surface

Row states