Position Sticky and Table Headers
position: sticky; a
<thead>. Nor a
<tr>. But you can sticky a
<th>, which means you can make sticky headers inside a regular ol’
<table>. This is tricky stuff, because if you didn’t know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individiaul element in a row.
The issue boils down to the fact that stickiness requires
position: relative to work and that doesn’t apply to
<tr> in the CSS 2.1 spec.
There are two very extreme reactions to this, should you need to implement sticky table headers and not be aware of the
- Don’t use table markup at all. Instead, use different elements (
<div>s and whatnot) and other CSS layout methods to replicate the style of a table, but not locked out of using
position: relativeand creating
position: stickyparent elements.
- Use table elements, but totally remove all their styling defaults with new
The first is dangerous because you aren’t using semantic and accessible elements for the content to be read and navigated. The second is almost the same. You can go that route, but need to be really careful to re-apply semantic roles.
Anyway, none of that matters if you just stick (get it?!) to using a
sticky value on those
It’s probably a bit weird to have table headers as a row in the middle of a table, but it’s just illustrating the idea. I was imagining colored header bars separating players on different sports teams or something.
Anytime I think about data tables, I also think about how tricky it can be to make them responsive. Fortunately, there are a variety of ways, all depending on the best way to group and explore the data in them.