Fixing Sticky Table Header with Horizontal Scroll Issue

I have a fixed menu on the left side of the viewport, which takes up the full height, and on the left side, there's a table. The table's data loads automatically as you scroll, and it has both a header and footer.

The problem I’m facing is with the table header. The header stays sticky at the top when scrolling vertically, but when I try to add horizontal scrolling by setting overflow-x: auto on the .content class, the sticky header is no longer fixed at the top.

How can I solve this issue and make the header sticky while still allowing for horizontal scrolling?

Link: https://codepen.io/Amit-Soni-the-vuer/pen/mydeqVE
CodePenAmit Soni
...
table
Was this page helpful?