Add sticky table headers - #42837
Conversation
Add a `.thead-sticky` class so a `<thead>` stays visible while the `<tbody>` scrolls. Add `--table-thead-sticky-top` and `--table-thead-sticky-zindex` tokens to offset fixed headers and control stacking. Document the class and shorten several table headings.
Scroll a table with `.thead-sticky`: a 1px strip of the next row shows above the header. `border-collapse` shares that border, so `top: 0` cannot cover it. Offset sticky `top` by the table border width and clip the example in an `overflow-hidden` wrapper.
|
Happy to see this being added. This was one of my only remaining feature requests for v6 :-) In the example looks like the header jumps one pixel when scrolling down. Also, I would like thead-sticky to either have a bottom border by default or at least support adding the border-bottom class. |
Yeah, needs some refinement. I think something with the border behavior on tables is interfering with the top offset—maybe the border-collapse. |
Yes, I researched this a good few years ago. I found it tricky to get right and think I resorted to use a 1px inset-shadow (but of a hacky workaround but it worked/looked correct visually). Alternatively the user could specify a different color background for the sticky header to differentiate it and help negate the need for a bottom-border. I might look into it again today and report back... |
2 participants
.thead-stickyclass that keeps a<thead>in view while the<tbody>scrolls inside a scrollable parent.--table-thead-sticky-topand--table-thead-sticky-zindextokens to offset fixed headers and control stacking.h3.