Keep a table header visible with sticky positioning

A long table reads badly when its column titles leave the screen. position: sticky keeps the header row in place without the duplication that fixed-position hacks require, but it only works once you state which box it is sticking inside of, and that is the part most attempts get wrong.

<div class="table-scroll" tabindex="0" role="region" aria-labelledby="orders-caption">
  <table class="data-table">
    <caption id="orders-caption">Open orders, newest first</caption>
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Customer</th>
        <th scope="col" class="num">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>10482</td>
        <td>A. Ferreira</td>
        <td class="num">240.00</td>
      </tr>
      <tr>
        <td>10481</td>
        <td>K. Osei</td>
        <td class="num">1180.50</td>
      </tr>
    </tbody>
  </table>
</div>

.table-scroll {
  max-block-size: 24rem;
  overflow: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--de-field-border, #6b7684);
  border-radius: 0.5rem;
}

.table-scroll:focus-visible {
  outline: 3px solid var(--de-focus-ring, #0b57d0);
  outline-offset: -3px;
}

.data-table {
  inline-size: 100%;
  min-inline-size: 40rem;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background-color: var(--de-surface, #f4f5f7);
  box-shadow: 0 1px 0 var(--de-border, #c7ccd4);
  padding: 0.5rem 1rem;
  text-align: start;
}

.data-table td {
  padding: 0.5rem 1rem;
  border-block-end: 1px solid var(--de-border, #c7ccd4);
}

.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

Explanation

Sticky offsets are resolved against the nearest scrollport, so the rule only means something once a scroll container exists. Here the wrapper is that container: max-block-size: 24rem plus overflow: auto gives it a definite block size and overflowing content, which is what creates the box whose top edge the header pins to. Omit the block size and the wrapper grows to fit the table, there is no vertical scrolling, and the header appears not to stick at all, which is the single most common failed attempt. The other supported shape is a table that scrolls with the page rather than inside a box: in that case you skip the wrapper entirely, set inset-block-start: 0 on the cells, and make sure no ancestor declares overflow: hidden or overflow: auto, because such an ancestor becomes the scrollport and the pin happens inside it instead of at the viewport.

The header cells carry the declarations, not the row group. Sticky support on a thead or a tr was missing in WebKit for years and is still the least reliable place to put it, while sticky on a cell is supported everywhere current. Per-cell sticking also explains the two remaining choices. border-collapse: separate with border-spacing: 0 is used because collapsed borders are computed once for the shared edge between two rows and do not travel with a stuck cell, which is why the bottom rule vanishes the moment the header pins; the box-shadow: 0 1px 0 line is a hairline that is painted as part of the cell, so it moves with it. background-color belongs on the cells too, because a transparent stuck cell lets the rows scroll visibly underneath it. min-inline-size: 40rem on the table keeps the columns from collapsing when the wrapper scrolls sideways, and overscroll-behavior-x: contain stops that sideways drag from carrying the whole page with it.

Two edges of the behaviour are worth checking against your own layout. tabindex="0" on the wrapper is there because a horizontally overflowing region is otherwise reachable only with a pointer; the role="region" plus aria-labelledby reference makes that focus stop announce what it contains, and the reference target may sit inside the scroll box that scrolls it out of view, since the accessible name comes from the DOM and not from what is currently painted. Sticky is also bounded by its containing block, so the header is only pinned while the table occupies the box: once the final row scrolls past, the header leaves with the table rather than holding at the top of the page the way a fixed element would. Nothing here helps a screen-reader user follow a row across columns; that association is carried by scope="col" on the header cells, and sticky only solves the sighted case.