Skip to content
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

Merged
merged 3 commits into from
Nov 9, 2022
Merged

report: sticky table headers #14508

merged 3 commits into from
Nov 9, 2022

Conversation

connorjclark
Copy link
Collaborator

@connorjclark connorjclark commented Nov 8, 2022

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.

image

image

@connorjclark connorjclark requested a review from a team as a code owner November 8, 2022 00:05
@connorjclark connorjclark requested review from adamraine and removed request for a team November 8, 2022 00:05
report/assets/styles.css Outdated Show resolved Hide resolved
}

.lh-table thead th {
position: sticky;
Copy link
Member

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?

Copy link
Collaborator Author

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

Copy link
Collaborator Author

@connorjclark connorjclark Nov 8, 2022

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.

Copy link
Member

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants