Table

Tables use a composable architecture with a base class and optional modifiers. The base style is minimalistic, clean borders, no background fills, and modifiers layer on additional behaviour.

Structure

Every table needs two elements:

1. A scroll wrapper (.table-scroll) for horizontal overflow on small screens
2. The table element with the .table base class

<div class="table-scroll">
  <table class="table">
    <thead>
      <tr>
        <th>Column</th>
        <th>Column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>
</div>

Base Class

The .table class provides the default minimalistic style:

Modifiers

Modifiers are added alongside .table on the <table> element. They can be combined freely.

Full Width

<table class="table table-full">

Hoverable Rows

<table class="table table-hover">

Filled Header

<table class="table table-header-filled">

Footer

The <tfoot> element is styled automatically when inside a .table:

• Top border: var(--border-m) solid var(--border-primary)
• Header cells: bold weight
• Data cells: semi-bold weight

<table class="table table-full">
  <thead>
    <tr><th>Item</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td>£50</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Total</th><td>£50</td></tr>
  </tfoot>
</table>

Combining Modifiers

Modifiers compose naturally. A full-featured table with hover, filled header, and footer:

<div class="table-scroll">
  <table class="table table-full table-hover table-header-filled">
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
  </table>
</div>

Responsive Behaviour

Tables are mobile-friendly by default:

• Horizontal scroll: .table-scroll allows swiping when the table is wider than the viewport
• Scroll hint: a subtle fade appears on the right edge when the table overflows, indicating more content. It disappears once the user scrolls to the end
• Condensed padding: at 768px and below, cell padding and font size reduce automatically to fit more content on screen

No extra classes or markup are needed. This behaviour is built into .table-scroll and .table.

Markdown Tables

Tables generated from markdown (via the doc generator) automatically receive the .table class inside a .table-scroll wrapper. No manual class application is needed for documentation pages.

Usage rules

Don't

• Don't apply spacing or margins to .table directly. Use the scroll wrapper or parent block for spacing
• Don't create combined classes like .table-hover-filled. Compose existing modifiers instead
• Don't hardcode border or colour values. Use the design system tokens

CSS reference

This section documents how the component is built. For usage, see the sections above.

Styling

Mobile (max-width: 768px)

Selectors