feat(table-container): sticky table header for tall tables#1585
Draft
caugner wants to merge 1 commit into
Draft
Conversation
Clone the `<thead>` into a fixed-position overlay that appears below the sticky page header when a `.table-container` table with at least 10 body rows scrolls past the breadcrumbs bar. The overlay mirrors the table's horizontal scroll position and shifts up by the cell's `border-top-width` to overlap the breadcrumbs bar's bottom border. Native `position: sticky` cannot be used here because `.table-container` sets `overflow-x: auto`, which makes it a scroll container on both axes and confines sticky positioning within it instead of relative to the viewport.
Contributor
|
86e7aff was deployed to: https://fred-pr1585.review.mdn.allizom.net/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Add a sticky
<thead>for tables wrapped in.table-containerthat have at least 10 body rows. A newhooks/sticky-table-header.js:<thead>into aposition: fixedoverlay placed just below the sticky page header,transform: translateX(...), andThe overlay shifts up by the cell's computed
border-top-widthso it overlaps the breadcrumbs bar's 1px bottom border instead of stacking with it.Motivation
Make column headers remain visible while scrolling through long content tables, without changing how
.table-containerhandles wide tables. Nativeposition: stickycan't be used because.table-containersetsoverflow-x: auto, which makes it a scroll container on both axes and confines sticky positioning within it instead of relative to the viewport.Additional details
.page-layout__header's bottom edge at runtime, so it follows the page header height..table-containeris mirrored on the clone viatranslateX(-scrollLeft).pointer-events: none— interactive elements inside<th>(e.g. sort buttons) are not clickable while the clone is shown.ResizeObserverkeeps cell widths in sync when the table or container resizes.Example: https://fred-pr1585.review.mdn.allizom.net/en-US/docs/Web/HTML/Reference/Attributes#attribute_list
Related issues or pull requests
Fixes #933.