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

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. — Mr Lister
– Mr Lister, 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. — Swetha Bindu
– Swetha Bindu, 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. — Mr Lister
– Mr Lister, Commented Mar 28, 2012 at 11:08

badawym · Accepted Answer · 2012-03-28 11:27:50Z

4

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

answered Mar 28, 2012 at 11:27

badawym

1,5091 gold badge14 silver badges19 bronze badges

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

Comments

Mr Lister · Accepted Answer · 2012-03-28 12:25:32Z

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?

answered Mar 28, 2012 at 12:25

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

4 Comments

Swetha Bindu Over a year ago

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...

Mr Lister Over a year ago

Sorry, I can't duplicate this problem. How does the width vary?

Swetha Bindu Over a year ago

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

Mr Lister Over a year ago

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.

Collectives™ on Stack Overflow

fixed headers in table, html

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related