fixed headers in table, html

Question

i had an table like this

   <div style="overflow:auto">
   <table>
     <thead><tr style="position:fixed"><th></th></tr></thead>
   </table>
   </div>

Now my problem is when i scroll div the header(that is tr element) is fixed it works fine but when i scroll the scrollbar of window the header tr is not fixed inside the div. I moves along the scroll bar of the window... Can any one help me to find out the solution please

Answer 1

我不知道如果我的问题是对的，你可能会觉得这很有用http://fixedheadertable.com/

Answer 2

Sorry, I tried to do it in CSS alone, but that didn't work out, so you do need a bit of Javascript.

<div style="overflow:auto; position:relative;"
    onscroll="document.getElementById('fixedtr').style.top = this.scrollTop+'px';">
  <table>
    <thead>
      <tr style="position:absolute; top:0; left:0" id="fixedtr">
        <th>Table header</th>
      </tr>
    </thead>

See jsFiddle .

This is how you want it, right?