The docs table shows rows of comparable data. It sits in a wrap with the elevation of a dashboard card and scrolls sideways when the window is narrow.
Every example on this page is the real component, not a picture.
A table in its wrap. The wrap carries the card shadow and scrolls sideways when the window is too narrow. Pick one header tone per page.
Text columns are left-aligned. Check-icon columns are centered on the docs pages (page-local).
Read-only eco-checkbox in a .check-icon cell.
The table keeps its width; the wrap scrolls and the page does not.
| Part | Value |
|---|---|
| Header row | 56px (a minimum: taller if the text wraps) |
| Body row | 48px (a minimum) |
| Cell padding | 11px top and bottom, 24px left and right. The 1px line makes it 12px; keeps a one-line row at 48px |
| Wrap | No border, overflow-x: auto |
Header cells and the first column (row header) are bold (600). Body cells are body-sm: 14/20, 0.36px. The same on every breakpoint.
Resolved from the live token package.
| State | Part | Token | Value |
|---|
| Tone | Token | When |
|---|---|---|
| Default | surface-02 | Standard |
| Accent | accent-light | More emphasis, Swedol accent. For Tools: --color-primitive-color-brand-tools-accent-light (a primitive) |
| Status | surface-{information, success, warning, danger}-weaker | Only when the table itself carries that status |
Pick one per page; never mix tones in one table. Header text stays text-primary.
Open points: the values come from the docs pages, not from a Figma component. Not built yet: sorting, selection, sticky header, empty and loading states, dark mode, very long cell text, and rows with a control other than a checkbox. The 11px padding is a consequence of the 1px row line.
| Topic | Rule |
|---|---|
| Markup | Real th with scope; name the table with a caption or a nearby heading. |
| Last row | No bottom line. Scope the rule to tbody, never a bare tr:last-child (it removes a one-row header’s line). |
| Narrow window | The wrap scrolls; the page does not (scrollWidth == innerWidth). |
| The data… | Use |
|---|---|
| has rows and columns to compare | Table |
| is one list of label and value pairs | A description list |
| is a layout | CSS grid, never a table |
th with scope.