Creating list and table sticky headers with HTML and CSS

Using CSS position: sticky

In this article we’ll see how to create list and table sticky headers using only HTML and CSS.

Recently I needed to create a sticky header, so I searched for the best way to do it. I read many articles and posts, but it was not easy to find updated and clear information about this subject, mainly because recent updates to browsers compatibility make many articles outdated. So I’ll share what I’ve learned with you, including some demos I’ve built to test the concepts.

If you just want to grab the code, skip to “Live demo, complete code and fiddle” section.

Until recently javascript was frequently used to create sticky headers, because CSS “ position: sticky" was in "experimental mode", meaning that it would not work on most browsers.

But at this moment 95% of browsers are compatible with it (according to Can I Use [1]), so it means it can be used with confidence.

A polyfill could be used to cover the remaining cases. Stickyfill [2] a project with 2.2k stars on GitHub has gone into “Unmaintained” mode because, as they say, “Stickyfill did a good job while the browsers were implementing position: sticky support. You can now safely use stickies without a polyfill, all modern browsers support them natively.”.

So let’s see what position: sticky is and how we can use it.

CSS position: sticky

According to MDN Web Docs [3], [4]:

A stickily positioned element is an element whose computed position value is sticky. It’s treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as “stuck” until meeting the opposite edge of its containing block.

So, this means the element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing…