Fixed table header using HTML and CSS with vertical *and* horizontal scrollbars

Making a fixed table header using just CSS and HTML where the table content is scrollable both vertically and horizontally.

This is only to fix the table column names. There can be multiple ways to achieve this, this is just what I found as the easiest.

[BudHines]

Thank you for this post! It really saved me. I am working with DataTables with sorting and filters. When I turned scrollx on in Datatables it put my filters on the bottom of the page. I tried everything suggested by datatables and tried a variety of css solutions. Nothing worked. Then I used added a div with your class of table-wrapper in my code and it provided the solution I needed! My filter controls are still at the top and I can scroll the width of the table. Great post. Thank you!

[ASHLIN]

bro you won't believe how helpful this video is. it consumed half of my day to solve the problem, that took me just half of your video. thanks a lot.

[sanyamsinghal]

Man, this video just saved me hours of debugging and getting my code to work. Thanks a lot!

[BenKopec]

I struggled for hours to try and get some other code to work. Completely scrapped it and followed your video and it worked perfectly! Thank you so much for posting!

[johnoppong]

You have saved my headache Isshin. Thank you so much.

[djmewada]

Great Explanation. It's perfectly worked for me.Thank you!

[forestlin]

Great job! It helps me solve the problem of tbody content overflowing thead while scrolling! Many thanks!!!

[CodeWithSubhajit]

Really appreciate your Hard work 😍 Love from India 🇮🇳

[danilomatrangolomarano]

This helped me a lot! Thank you so much!

[yyttommy]

You saved me, very thanks. Please keep going

[almirsilva]

Thanks. I liked the content. And congratulations; as the feature was very well explained.

[DevanshuAugusty]

Brother, I can't thank you enough

[GrumpyOldMan]

The heading slightly moves up/down (perhaps a single pixel) when changing the scroll direction on the mouse wheel. How can that be avoided?

[philippecasasnovas]

Hello
thank you for your video, a small problem if back-ground-color of the thead is the rgba type

[ImranSheikh-kgqd]

Hey can you make the header sticky to the document top.

[kirannaik]

How to get the navigation in first column if we are searching new data based on grid

[yashodae]

I have to implement same scroll for mobile device but have to hide or switch to mobile vertical scroll from table vertical scroll once user reaches the end of table. Is there a way to do it?

[wladan]

it's easy when there is vertical scroll. I need for horizontal but not vertical scroll.

[rishupshah]

you have given fix max-height 300px so, it will show scroll.
I need to know one thing for one of my scenarios.
I have some widgets above the table and table rows should be scrollable if more data otherwise, don't show scroll to table body. It should fit during zoom in or zoom out as well. I want to avoid calc(100vh - 100px) as we can have any widgets above the table.

[negarrahbar]

my horizontal scrollbar is not visible when the table is long. I tried overflow-x with width 100% but it's still not visible until I scroll down to the bottom. How can I fix it?