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:

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

[tomfreedom]

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.

[thecyrusj]

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

[renugupta]

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

[thecyrusj]

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.

[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.

[ankitkraken]

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

[thecyrusj]

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.

[shreyareddy]

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

[shvideo]

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

[BongTuts]

Clear Explanation, Thank you very much for your effort.

[beinyourguard]

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

[elvinasss]

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.

[thecyrusj]

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?

[ChizmarFarms]

Thank you, this is what I needed to know!

[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.

[kernag]

Awesome tutorial, helped me a lot. Thanks you!

[karmayogi]

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

[swethas]

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

[m.revaldi]

can you tell me how to set thead full width?