[SOLVED] Is it possible to lock a HTML table's header row position but still allowing the table body to scroll up/down?

Question

I am practicing to populate a CSV file content into a HTML table. I have done the code, but I need guidance. I don't want the table's header row to move up out of sight when I'm scrolling the page down, I want it to stay where it is.

Is there a way to this perhaps using CSS? I would prefer not to use a framework if I can help it.

Code link below ...
Thank you in advance 🙏

https://code.sololearn.com/WeKT6ZjL9wZM/?ref=app

Answer 1

search for "sticky nav" same concept...

Answer 2

Ipang you can run Sololearn playground from PC browser

Answer 3

Lisa F
Thank you for the hint, I will look it up 🙏

Answer 4

https://code.sololearn.com/WwcmgO4RR9J6/?ref=app

Try it on PC, since position: fixed maybe not work on WebView .

Answer 5

Thank you for the time Calvin,
I've searched for solution to this case, and I saw a lot of people say this is tricky issue and browser compatibility issues for available solutions are present.

Is that why the code still allows the header row to scroll in SoloLearn app? I haven't tested it in browser though, copy paste from SoloLearn to local file is quite a hassle in a phone 😁

Answer 6

Calvin,
I meant to test it offline, where there's no interference from SoloLearn Code Playground background feature.

Answer 7

Calvin,
Currently I have no access to a PC/laptop either 😁