LexLexLex

PostsComments

KPCKevin Powell - Community

•Created by LexLexLex on 11/15/2023 in #front-end

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

3 replies