Problems with Sticky thead element
See original GitHub issueI’m trying to make the thead
of a table
sticky so it follows a person down the table as they scroll.
<table>
<Sticky>
<thead>
<tr>
<th className={theme.tHeader}>Name</th>
<th className={theme.tHeader}>Stage</th>
<th className={theme.tHeader}>Assigned To</th>
<th className={theme.tHeader}>Source</th>
</tr>
</thead>
</Sticky>
// other code for table...
</table>
Unfortunately, you can’t put a div
inside of a table
element like I’m doing here. Is there any way to make the thead
sticky without creating a whole separate component in place of it? If not, do you have any suggestions as to how to make a custom thead
-like component that will scale with the chart like a regular thead
would?
Issue Analytics
- State:
- Created 7 years ago
- Reactions:9
- Comments:6
Top Results From Across the Web
Position sticky on thead - Stack Overflow
If you need sticky header for chrome only then you can set position: sticky; top: some_value ( top property is mandatory) for td...
Read more >Position Sticky and Table Headers | CSS-Tricks
The issue boils down to the fact that stickiness requires position: relative to work and that doesn't apply to <thead> and <tr> in...
Read more >CSS position:sticky Not Working? Try This Fix
In order for the sticky element to function correctly, it needs to have at least one of it's top , right , left...
Read more >How to Fix Issues With CSS Position Sticky Not Working?
If the parent element has no height set then the sticky element won't have any area to stick to when scrolling. This happens...
Read more >702927 - position: sticky does not work on <thead> or <tr>
Unfortunately, this problem still causes sticky positioning with Chrome to be highly suboptimal. The problems is that on Wikipedia we have many tables...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@liubko not sure, but as I remember the discussion continues here: https://github.com/captivationsoftware/react-sticky/issues/88
Still not working with table rows. Please put this fact in FAQ.