1

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

4
  • 1) What does this have to do with Javascript? 2) Can you show more of your code? I don't get the scrollbar on the div, only on the window, and it works fine. 3) I hadn't expected it to work fine, since table parts don't like things like positioning. Commented Mar 28, 2012 at 10:47
  • Thank you for your reply...Actually there is a large data in the div i have to maintain headers fixed and i am using width as percentages like <th style="width:10%"></th> and moreover my window contains so many things so scroll bar appears for my window also... But when i had given position as "fixed" it scrolls with the window. Finally my concern is that i would like to fix the headers in the table. Commented Mar 28, 2012 at 10:59
  • Well, with some more fiddling, like adding a fixed height to the div, I did have two scrollbars. And yes, the tr does get fixed to the window, not to the div. But I think I may have a solution. Commented Mar 28, 2012 at 11:08
  • Thank you.. can you please help me to find the solution... Commented Mar 28, 2012 at 11:12

2 Answers 2

4

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

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

Comments

0

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?

4 Comments

Thank for your reply. I had used this. This has partially fixed my problem. My problem is i had given th element widths in %'s something like <th style="width:10%"</th> so when i scroll down the widths vary.... How to fix this issue...
Sorry, I can't duplicate this problem. How does the width vary?
At first after the page load the headers appears in correct width. when once i scroll down the headers adjusts the width as auto i mean when i had column as "SLMG" the th element width is size of SLMG text... but i applied the width for it as 30%...thats my problem
I can't duplicate the problem you have; can you post a jsFiddle of what you have now, or a link to your site? Hopwever, I do find that not all browsers handle width on the positioned elements the same, so it will need some more work. For a start, try giving both the <tr> and the <th> in it a width.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.