How do you build a table whose header row stays visible while the table body scrolls, using position: sticky?

## The shape of the solution A scrolling table with a persistent header is one of the few genuinely fiddly sticky use cases, because tables have their own painting and border rules that interact with sticking. The core is short — sticky cells with an inset and a background — and the rest is dealing with those interactions. ```css .table-scroll { overflow: auto; /* this is the scroll container the header sticks inside */ max-block-size: 70vh; } .table-scroll table { border-collapse: separate; border-spacing: 0; } .table-scroll th { position: sticky; top: 0; background: Canvas; /* rows scroll underneath, so opacity matters */ box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.2); } ``` ## Why the background is mandatory A stuck cell is a positioned box painted over the in-flow content passing beneath it. Table cells have a transparent background by default, so without an explicit one you see body rows sliding through the header text. This is the first thing to check when a sticky header "looks glitchy" — it is not a rendering bug, it is transparency. ## Why the borders disappear This is the part that surprises people. With `border-collapse: collapse`, the collapsed borders are painted by the table, not by the individual cells. The sticky offset moves the cell box, but the table's borders stay where the table's geometry puts them, so the header's bottom rule scrolls away while the header itself stays pinned. The dependable fix is to stop collapsing: - `border-collapse: separate` with `border-spacing: 0` keeps the collapsed look while giving each cell its own borders, which move with the sticky cell. - Draw the divider with `box-shadow` — either an `inset` shadow as above, or an outer one — because a shadow is painted with the cell and needs no layout space. `outline` is another option that travels with the box, though it paints on all sides unless you accept that. ## Which element to stick Historically, only individual header and data cells reliably accepted `position: sticky`; browsers did not apply sticky to row groups or rows because of how table row groups are laid out. That changed — Chrome added sticky support for `thead` and `tr` in version 91 (2021), and current Firefox and Safari support it as well. Sticking the row group is more convenient for multi-row headers, since one rule covers every cell. If you need to support engines older than that, target the cells. It is the lower-risk choice and costs nothing: `thead th { position: sticky; top: 0; }` covers the whole header row because every cell independently holds the same threshold. ## The scroll container decides what `top: 0` means A sticky header sticks inside the nearest scrolling ancestor. If the table lives in a wrapper with `overflow: auto`, that wrapper is the container, and `top: 0` pins the header to the wrapper's top edge — normally what a data grid wants. If the table simply flows in the page, the header pins against the page scrollport instead, and if the page already has its own sticky toolbar you must offset for it: `top: var(--toolbar-height)` rather than `0`, so the two stuck elements stack rather than overlap. ## Two sticky axes at once A frozen first column is the same trick on the other axis: `position: sticky; left: 0` on the first cell of each row, again with a background. The interesting cell is the corner one, which belongs to both — it needs `top: 0` and `left: 0` together. When several stuck elements overlap, painting order matters. Stuck cells are positioned boxes, so among positioned boxes with no `z-index` the later one in document order paints on top; the corner cell must sit above both the header row and the frozen column, which means giving it a higher `z-index` than either. A simple, working assignment is a low value on the frozen column, a higher one on the header row, and the highest on the corner cell. ## What to check when it does not work The usual failures are the general sticky ones wearing a table costume: no inset declared, or an ancestor with `overflow: hidden` capturing the header so it sticks inside a box that never scrolls. Beyond those, table-specific checks are whether the cell has a background, whether the missing line is a collapsed border rather than a missing rule, and — on older engines — whether you stuck a row group that the browser will not stick.