-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
report: sticky table headers #14508
report: sticky table headers #14508
Conversation
} | ||
|
||
.lh-table thead th { | ||
position: sticky; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i would have expected to see these on the thead
instead. i don't know if it makes a diff to the rendering engine but it feels nicer to manage the position of these as a group rather than individually.
wdyt?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
positioning that element does not work, it's a special display element
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, got bit confused here. thead support position: sticky
but... border-bottom does not work b/c table borders are a special breed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
True. I had thought I got it working, but couldn't reproduce it without losing the border.
All good!
This chang required removing
overflow: hidden
from.lh-categories
(unclear why this was there), otherwise the sticky positioning doesn't work. Also needed a bottom border on the th to separate it from the table body when positioned stickily, so now there's a bottom border on the th.