Sticky table th's with position:sticky

This is not new anymore, nowadays it became so easy to have a piece of content stuck while you’re scrolling. No JS, no hassle just some CSS position: sticky magic. But the real thing is dealing with tabular sticky info.

Remember the last web app you’re working on it that had a large table with lots of data rows? Feels like yesterday, no? Well, having this scenario, in terms of UX, it’s almost mandatory to have thead’s or tr’s stuck while browsing the tabular data.

CSS writing mode experiment

Sounds easy, but …

Sticky thead’s or tr’s: not going to happen anytime soon.

For tables, position: sticky defers to the position: relative spec. At this time, Blink only supports CSS 2.1 for positioned elements, and the position: relative CSS 2.1 spec says that it does not apply to <thead> and <tr> elements.

from the Chrome bug

  table th {
    position: sticky;
    top: 0;
  }

For now, sticky positioning for th’s seems to be the only workaround and it works just fine in stable Chrome, Firefox, Edge and Safari browsers.