CODEWITHSUNDEEP
javascripthtml
Swetha Bindu
Swetha Bindu

Reputation: 649

fixed headers in table, html

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

Upvotes: 1

Views: 579

Answers (2)

Mr Lister
Mr Lister

Reputation: 46539

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?

Upvotes: 0

badawym
badawym

Reputation: 1499

I don't know If I'm getting your question right, but you may find this helpful http://fixedheadertable.com/

Upvotes: 4

Related Questions