Table

Data-table geometry with a scroll container and optional pinned edges. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• table-scroll, table, table-row, table-body, table-footer, table-numeric, table-caption, table--pin-rows
• table--pin-cols

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div class="table-scroll focus-ring" role="region" tabindex="0" aria-label="Team members table">
  <table class="table">
    <caption class="table-caption">Team members</caption>
    <thead><tr class="table-row"><th scope="col">Name</th><th scope="col">Role</th></tr></thead>
    <tbody class="table-body"><tr class="table-row"><th scope="row">Ada</th><td>Engineer</td></tr></tbody>
  </table>
</div>

Variants and composition

table-scroll is the keyboard-scrollable wrapper. table–pin-rows and table–pin-cols keep headings visible; table-numeric aligns numeric cells.

Keep the table structure table > thead/tbody/tfoot > tr > th/td. Pinning targets those direct sections and cells so nested tables retain their own state. Row/footer borders likewise target direct cells. Supply backgrounds for sticky headings and row headers so scrolled text does not show through.

Behavior and accessibility

Retain table headings and caption for data. Name and keyboard-enable the overflow container; pinned rows/columns are optional presentation.

Reference

See the interactive Storybook specimen ↗. Continue to Tabs or return to the Official preset overview.