![]() So I keep searching for a sustainable solution, and what I found was just suggesting giving up on tag, or giving up the table display, and use flex instead like this: ![]() But if you maintain this page for a long term, or team working on the same page, can you make sure your sticky element will never been wrapped in an element with overflow:hidden? I bet no. Then you may think OK in this case, let us try to avoid wrapping tables in a overflow:hidden element. Well, this sounds like a case CSS standard forgot to cover. This effectively inhibits any "sticky" behavior (see the Github issue on W3C CSSWG). Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. Why? It turned out thanks to this killer my dear overflow: hidden. Then I tried this on the platform I was working on. The issue boils down to the fact that stickiness requires position: relative to work and that in the CSS 2.1 spec. Then I found the blog " Position Sticky and Table Headers" by Chris Coyier, and he explained this clearly: My first reaction was to try on, and it didn't work. And this, often requires keeping table header in our sight all the time, aligning with the columns, so we can tell what does each cell mean easily. It is classic to display data with a table, each row is a record, each column is a data field, and the page could show quite a few data records, which requires user to scroll vertically enable to overlook large amount of data.
0 Comments
Leave a Reply. |