Trying to use CSS to freeze header row in table

[shu]

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:

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

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

[ScottR]

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

[shu]

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.

[Jay]

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

[shu]

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