question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problems with Sticky thead element

See original GitHub issue

I’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:open
  • Created 7 years ago
  • Reactions:9
  • Comments:6

github_iconTop GitHub Comments

1reaction
vyorkincommented, Jul 3, 2017

@liubko not sure, but as I remember the discussion continues here: https://github.com/captivationsoftware/react-sticky/issues/88

0reactions
slchcommented, Jul 31, 2019

Still not working with table rows. Please put this fact in FAQ.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found