You can’t position: sticky; a
. Nor a| workaround. Don’t use table markup at all. Instead, use different elements ( s and whatnot) and other CSS layout methods to replicate the style of a table, but not locked out of using position: relative and creating position: sticky parent elements. Use table elements, but totally remove all their styling defaults with new display values. 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 elements. | See the Pen Sticky Table Headers with CSS by Chris Coyier (@chriscoyier) on CodePen. 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. Go to Top |
|---|