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.
Neither thead nor tr work with sticky positioning
The CSS position: sticky declaration on thead’s or tr’s is 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.