1

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%;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Matt-pow
  • 946
  • 4
  • 18
  • 31

1 Answers1

3

Try this

<table>
   <thead class="fixedthead">
     <tr>
       <th>...</th>
       <th>...</th>
       <th>...</th>
    <tr>
   </thead>
   <tbody>
       ...
   </tbody>
</table>

.fixedthead{position:fixed; top:0px;}
v-stackOverFollower
  • 575
  • 3
  • 12
  • 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. – Xariez Apr 26 '17 at 07:14