How to Create Sticky Table Headers with PURE CSS - Web Development Tutorial

In this video tutorial I'll be showing you how to create sticky (or fixed) table headers for your HTML tables using pure CSS - no JavaScript required!
This is done by using "position: sticky;" on the table header cells.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#css #webdev #dcode

[@tomfreedom3259]

I love quick easy low code solutions. Thanks!

[@scottsaccenti]

Can’t believe I am only just now finding your channel. What an incredible amount of quality content. Subscribed.

[@shvideo1]

Extremely well explained and succinct. Great work! Thank you!!

[@renugupta5985]

I was banging my head so badly on this problem. Didn't knew solution was so simple. Thanks a lot man.

[@kernag7688]

Awesome tutorial, helped me a lot. Thanks you!

[@shreyareddy6456]

Thanks for sharing such a simplified solution. Worked for me.

[@TheDrugOfTheNation]

Thanks: I had attempted this already with no luck, but this clear example convinced me to try again from first principles. It appears that if the table has a "display: block" style then the sticky position does not work. I changed that to "display: block-inline" and that fixed it.

[@thecyrusj13]

By the way thanks for the video. This was the most simple and to the point explanation I've seen.

[@dcode-software]

Awesome mate

[@BongTuts]

Clear Explanation, Thank you very much for your effort.

[@thecyrusj13]

So I got around this by creating a div with top, right, and bottom borders and added overflow and height to it. I wrapped the table in this div then added border-right and border-left to the th elements. I made sure I had no border on the table itself. After that the transparency problem was solved. Other than that I pretty much followed your model. Thanks again.

[@ChizmarFarms]

Thank you, this is what I needed to know!

[@ThePike57]

you just made my day!!!.. thank you

[@dollymanglani4122]

Big Thanks, you saved my day. :)

[@Ali_TBD]

thank you, that was helpful

[@thecyrusj13]

For the th elements I had to add a top of -1px instead of 0 in order to to avoid having a transparent border on top.

[@thecyrusj13]

There is still an issue with the text for each table data cell show through the top as you scroll. I could use top: -1px as I mentioned earlier but this causes a subtle 1px shift at the top as the user scrolls. Is there anyway around this?

[@karmayogi2392]

Thanks mate, was really helpful. How can I make sticky header for first two rows or Headers please?

[@chetona655]

Thank You so much!!!!

[@beinyourguard]

Thanks, mate. Can't believe it was actually that simple to do lol

[@dcode-software]

No worries mate

[@ankitkraken]

The content of the table is slightly visible behind the header after it goes above it, if you scroll down.

[@khanhle8566]

tks bro
😍

[@m.revaldi9039]

can you tell me how to set thead full width?

[@swetha3s]

Position:sticky is not working on ie, I tried fixed as well but it does not work...is there a way to fix it?

[@elvinasss2767]

Nice, but apart from that this is really strange that sticky position is applied to all th tags instead of thead or tr which makes it unintuitive to use in the future.

[@joeseabreeze]

This doesn't work for me. It must have something to do with where I have the table in the page. It's like the wrapping div is canceling it out, or maybe the width and height of the table (I have it at 100% because the wrapping div manages the size). I'm thinking that top: 0 won't work in my case and not sure how to fix it. The table is not upper left, stand-alone element like your example (not sure if that's even practical). I have to put it at a specific position on the page and it's wrapped in another div. You're also scrolling the whole page, which isn't something that you'll likely do in the real world, especially if there are more elements on the page. Can you do one with scrolling within a block-level component like div? I think that's why most people can't ever get this to work.

[@curyrodrigo]

not work when table is inside a div!

[@sagarsahoo3203]

How to create a sticky header table situated inside a div at bottom right corner

[@terencewong8031]

the table header can't fully cover the words when scrolling down

[@ob7349]

💃🇺🇦🙏

[@romeswararao9431]

override header text