Table

Styles for real <table> markup: caption, header cells with scope, and a wrapper that scrolls horizontally when the table is wider than its container. There is no sorting, filtering or data engine.

CSS: css/components/table.css (in ivolt.css).

Scrollable wrapper

iv-table-wrap is a labelled, focusable region (role="region", tabindex="0") so keyboard users can scroll it.

A table in its scrollable wrapperfixtures/table/basic.htmlOpen alone

<div class="iv-stack iv-u-gap-6">
  <div class="iv-table-wrap" role="region" aria-labelledby="tbl-releases-caption" tabindex="0">
    <table class="iv-table iv-table--striped">
      <caption id="tbl-releases-caption">Package releases published from this repository</caption>
      <thead>
        <tr>
          <th scope="col">Version</th>
          <th scope="col">Date</th>
          <th scope="col">Status</th>
          <th scope="col" class="iv-u-text-end">Size (kB)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">0.1.0</th>
          <td>2026-09-13</td>
          <td><span class="iv-badge iv-badge--success">Published</span></td>
          <td class="iv-u-text-end">42.8</td>
        </tr>
        <tr>
          <th scope="row">0.1.0-rc.2</th>
          <td>2026-09-06</td>
          <td><span class="iv-badge">Pre-release</span></td>
          <td class="iv-u-text-end">42.1</td>
        </tr>
        <tr>
          <th scope="row">0.1.0-rc.1</th>
          <td>2026-08-30</td>
          <td><span class="iv-badge iv-badge--warning">Deprecated</span></td>
          <td class="iv-u-text-end">41.6</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="iv-table-wrap" role="region" aria-labelledby="tbl-budget-caption" tabindex="0">
    <table class="iv-table iv-table--compact iv-table--bordered">
      <caption id="tbl-budget-caption">CSS budget per entry point (compact and bordered)</caption>
      <thead>
        <tr>
          <th scope="col">Entry point</th>
          <th scope="col">Contents</th>
          <th scope="col" class="iv-u-text-end">Budget (kB)</th>
          <th scope="col" class="iv-u-text-end">Current (kB)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">core.css</th>
          <td>Reset, tokens, base</td>
          <td class="iv-u-text-end">12.0</td>
          <td class="iv-u-text-end">9.4</td>
        </tr>
        <tr>
          <th scope="row">ivolt.css</th>
          <td>Everything, in layers</td>
          <td class="iv-u-text-end">45.0</td>
          <td class="iv-u-text-end">42.8</td>
        </tr>
        <tr>
          <th scope="row">ivolt.flat.css</th>
          <td>Everything, no layers</td>
          <td class="iv-u-text-end">45.0</td>
          <td class="iv-u-text-end">42.6</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Stacked on small screens

iv-table--stack turns each row into a block below the md breakpoint and prints data-iv-label before each cell.

Stacked on a narrow screenfixtures/table/stack.htmlOpen alone

<table class="iv-table iv-table--stack" role="table">
  <caption>Support requests for the current week</caption>
  <thead role="rowgroup">
    <tr role="row">
      <th scope="col" role="columnheader">Ticket</th>
      <th scope="col" role="columnheader">Subject</th>
      <th scope="col" role="columnheader">Status</th>
      <th scope="col" role="columnheader" class="iv-u-text-end">Waiting (hours)</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader" data-iv-label="Ticket">IV-482</th>
      <td role="cell" data-iv-label="Subject">Focus ring clipped inside the table scroll region</td>
      <td role="cell" data-iv-label="Status"><span class="iv-badge iv-badge--warning">In progress</span></td>
      <td role="cell" data-iv-label="Waiting (hours)" class="iv-u-text-end">6</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader" data-iv-label="Ticket">IV-479</th>
      <td role="cell" data-iv-label="Subject">Dark theme contrast on subtle badges</td>
      <td role="cell" data-iv-label="Status"><span class="iv-badge iv-badge--success">Resolved</span></td>
      <td role="cell" data-iv-label="Waiting (hours)" class="iv-u-text-end">21</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader" data-iv-label="Ticket">IV-471</th>
      <td role="cell" data-iv-label="Subject">Stacked table labels missing on narrow screens</td>
      <td role="cell" data-iv-label="Status"><span class="iv-badge iv-badge--danger">Blocked</span></td>
      <td role="cell" data-iv-label="Waiting (hours)" class="iv-u-text-end">73</td>
    </tr>
  </tbody>
</table>

Modifiers

--striped, --compact, --bordered, --stack. Numeric columns use iv-u-text-end.

Common mistakes

Tables used for layout.
Header cells without scope.
Stacked tables without data-iv-label on cells.

Class index

Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.

Class	What it does
`iv-table--striped`	Zebra rows.
`iv-table--bordered`	Border on every cell.
`iv-table--compact`	Tighter padding for dense data.

Every content component