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…