Tabla (table)

Estilos para marcado <table> de verdad: leyenda, celdas de cabecera con scope y un contenedor que se desplaza en horizontal cuando la tabla es más ancha que su contenedor. No hay ordenación, filtrado ni motor de datos.

CSS: css/components/table.css (dentro de ivolt.css).

Contenedor con desplazamiento

iv-table-wrap es una región etiquetada y enfocable (role="region", tabindex="0") para que quien navega con teclado pueda desplazarla.

Una tabla en su envoltura desplazablefixtures/table/basic.htmlAbrir sola

<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>

Apilada en pantallas pequeñas

iv-table--stack convierte cada fila en un bloque por debajo del punto de ruptura md e imprime data-iv-label delante de cada celda.

Apilada en pantalla estrechafixtures/table/stack.htmlAbrir sola

<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>

Modificadores

--striped, --compact, --bordered, --stack. Las columnas numéricas usan iv-u-text-end.

Errores frecuentes

Tablas usadas para maquetar.
Celdas de cabecera sin scope.
Tablas apiladas sin data-iv-label en las celdas.

Índice de clases

Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.

Clase	Qué hace
`iv-table--striped`	Filas en cebra.
`iv-table--bordered`	Borde en todas las celdas.
`iv-table--compact`	Relleno más ajustado para datos densos.

Todos los componentes de contenido