Responsive table

Preview Available in release assets

Keep genuinely tabular relationships intact in narrow containers by providing an explicitly labelled horizontal scrolling region.

Responsive table in context

<div class="thin-responsive-table" role="region" aria-labelledby="orders-caption" tabindex="0">
  <table class="thin-table">
    <caption id="orders-caption">Recent orders — scroll horizontally to see every column</caption>
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Customer</th>
        <th scope="col">Delivery window</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">
          <a href="/orders/1042">#1042</a>
        </th>
        <td>Samira Okafor</td>
        <td>Monday, 9:00–11:00</td>
        <td>$148.00</td>
      </tr>
      <tr>
        <th scope="row">
          <a href="/orders/1041">#1041</a>
        </th>
        <td>長い名前の顧客</td>
        <td>Tuesday, 13:00–15:00</td>
        <td>$82.50</td>
      </tr>
    </tbody>
  </table>
</div>

Show code

<div class="thin-responsive-table" role="region" aria-labelledby="orders-caption" tabindex="0">
  <table class="thin-table">
    <caption id="orders-caption">Recent orders — scroll horizontally to see every column</caption>
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Customer</th>
        <th scope="col">Delivery window</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">
          <a href="/orders/1042">#1042</a>
        </th>
        <td>Samira Okafor</td>
        <td>Monday, 9:00–11:00</td>
        <td>$148.00</td>
      </tr>
      <tr>
        <th scope="row">
          <a href="/orders/1041">#1041</a>
        </th>
        <td>長い名前の顧客</td>
        <td>Tuesday, 13:00–15:00</td>
        <td>$82.50</td>
      </tr>
    </tbody>
  </table>
</div>

Anatomy

Labelled overflow region
Native table
Visible caption with overflow guidance
Column headers
Optional row headers
Data cells

Variants and sizes

Natural-width table
Custom --thin-table-min minimum
Dense authored content

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Wide container
Horizontal overflow
Keyboard focus
Two-hundred-percent zoom
Long and localized values
Right-to-left content
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The wrapper uses native horizontal scrolling. Tabindex makes the labelled region keyboard reachable in browsers that do not automatically focus scroll containers; no script or pointer-only gesture is required.

Accessibility

Keep a meaningful caption and correct th scope relationships. Reference the caption from the region, mention horizontal scrolling when overflow is likely, and never duplicate cell labels with CSS-generated content or transform a data table into misleading cards.

Contract

COMPOSE

Basis

Native document content and table/scroll region; no APG widget

Evidence

tests/unit/library/content-patterns.test.ts

API

Wrap a semantic table.thin-table in .thin-responsive-table. Add role=region, tabindex=0, and aria-labelledby pointing to the caption when the table can overflow. Set --thin-table-min from the information density, not the viewport.

Behavior tier: native

Custom properties

PropertyDefaultDescription

--thin-table-min42remMinimum inline size before the table wrapper scrolls.

Fallback

The native caption, headers, rows, and cells preserve every relationship without CSS or JavaScript; a narrow no-CSS viewport may use browser page overflow.

Assets and dependencies

/components.css

Dependencies: None

Source: packages/ui/src/items/responsive-table/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Table