Fixed table header in <thead> using only CSS [duplicate]

Question

I am trying to get a fixed table header for thead without using Javascript. Here is the basic setup of my table:

<table> <thead> <tr> <th>...</th> <th>...</th> <th>...</th> <tr> </thead> <tbody> ... </tbody> </table>

I tried using css but no luck of achieving it. I got a fixed header but the width of it is small and it's not adjustable.

.thead { position:fixed; top:0; width:100%; }

thead is not a class. remove . before thead in css

Swapnil Patil
– Swapnil Patil

2017-04-26 05:00:31 +00:00
Commented Apr 26, 2017 at 5:00 — Swapnil Patil
– Swapnil Patil, Commented Apr 26, 2017 at 5:00

v-stackOverFollower · Accepted Answer · 2017-04-26 06:47:26Z

3

Try this

<table> <thead class="fixedthead"> <tr> <th>...</th> <th>...</th> <th>...</th> <tr> </thead> <tbody> ... </tbody> </table> .fixedthead{position:fixed; top:0px;}

answered Apr 26, 2017 at 6:47

v-stackOverFollower

6054 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Xariez Over a year ago

When using '0', a unit shouldn't be present (so in this case, it should just be top: 0;), besides that though, this should work.

Collectives™ on Stack Overflow

Fixed table header in <thead> using only CSS [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related