position: sticky

A table header that stays put

CaveatAny ancestor carrying overflow: hidden switches sticky off silently — no warning, no error, the header just scrolls away. That ancestor is usually a card wrapper somebody added months later.

FallbackWhere sticky is unsupported the header scrolls with the table, which is the plain table you started with. Nothing to polyfill.

/* sticky goes on th, not thead */
.scroller { overflow: auto; }

.scroller th {
  position: sticky;
  top: 0;
  /* or rows show through */
  background: #1a212d;
}

Published 16 Aug 2026