Trying to use CSS to freeze header row in table

Hi there,

I know there's a native feature that allows us to freeze columns inside of a table, however I'd also like the ability to freeze the header row so when I scroll down I can see each column header:
Screen Shot 2022-07-21 at 11.23.19 AM

My current code looks like this inside the Scripts and Styles section:

New to web development so apologize if I'm missing something basic!

If you make the table scrollable, the header will remain in place.

1 Like

Thanks for the reply!

That solution does work, however I'd like to keep the pagination if possible (the table performance drops quite a bit when scrolling). I was hoping there would be a CSS workaround to the issue.

Hey Shu, I've tested this and putting a position: fixed on this specific CSS selector which I copied from the the chrome dev tools seemed to do the trick:

The selector looked like this on my end:

#rt-table-table1 > div.rt-thead.-header > div

Great, I'll give this a shot! Thanks so much.