Scrollable Tables and Position Sticky oh my
Hey all, thanks in advance for any possible assistance. I am stumped by this one as I have googled it many times but haven't been able to find a good solution.
Here is a code pen with the basics of the skeleton I'm trying to work on:
https://codepen.io/LexCodepen/pen/LYqOYzR
I have a page with a table that I want to be scrollable in both X and Y directions. It is too wide to fit on the page and too tall. When scrolling down I want the Table headers to be sticky to the top of the page.
When I scroll left/right I want the headers to scroll as well so I have the correct header obviously and I also want to make sure that the Navigation doesn't get scrolled away and stays in place (I can scroll horizontally but then I lose the nav on scroll which is unattractive).
I am not opposed to using Javascript to address this issue! I know part of this has to do with overflow and sticky not being the best of friends but are there any reasonable workarounds or am I trying to build an impossible escher like layout?
Thanks
-Lex
Here is a code pen with the basics of the skeleton I'm trying to work on:
https://codepen.io/LexCodepen/pen/LYqOYzR
I have a page with a table that I want to be scrollable in both X and Y directions. It is too wide to fit on the page and too tall. When scrolling down I want the Table headers to be sticky to the top of the page.
When I scroll left/right I want the headers to scroll as well so I have the correct header obviously and I also want to make sure that the Navigation doesn't get scrolled away and stays in place (I can scroll horizontally but then I lose the nav on scroll which is unattractive).
I am not opposed to using Javascript to address this issue! I know part of this has to do with overflow and sticky not being the best of friends but are there any reasonable workarounds or am I trying to build an impossible escher like layout?
Thanks
-Lex
