Jump to content

Sticky table headers

In some situations, table headers need to be placed at a specific place on screen, and remain there, even when scrolling. Especially when tables are very long, it is useful to make the table header sticky on top so visual users always see it, even when scrolling vertically.

Using position: sticky on table header elements is the most straight-forward approach to have fixed headers (both vertically and horizontally).

Adrian Roselli has a great, detailed post about the intricacies of this solution.

Table with fixed headersPreview