How to fix header of table

Question

Possible Duplicate:
How to freeze table header

I am having a table which is getting populated through ajax call, having fallowing structure-

<table>    
    <thead>        
        <tr>            
            <th colspan="4">Current</th>            
            <th colspan="4">New/Requested</th>        
        </tr>        
        <tr>            
            <th nowrap="nowrap">RSD &nbsp;&nbsp;&nbsp;&nbsp;</th>           
            <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>            
            <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>            
            <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>            
            <th nowrap="nowrap">CRD &nbsp;&nbsp;&nbsp;&nbsp;</th>            
            <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>           
            <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>            
            <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>            
            <th nowrap="nowrap">Action</th>            
            <th nowrap="nowrap">Reason</th>            
            <th nowrap="nowrap">Action Code Status </th>        
        </tr>
    </thead>    
    <tbody>         
        <tr>             
            <td></td>              
            <td></td>                
            .....plenty of rows        
        </tr>     
    </tbody> 
</table>

I am trying to freeze the header of this table..
Note: I want to do it on page scroll not table body scroll.
I tried it in all the way as suggested in this post, but nothing seems to work for me...
Any ne one have some different approach or some working example that would be a great help for me.

jsFiddle of problem : http://jsfiddle.net/UX6Sk/

Beacause they want to feel !important (pun intended) by voting. — Jawad, Jul 01 '11 at 06:16

score 4 · Answer 1 · answered Jul 01 '11 at 06:10

4

you can find it right here Fix the header

AND demo from here Demo is here

answered Jul 01 '11 at 06:10

chhameed

4,406
4
26
44

score 1 · Answer 2 · answered Jul 01 '11 at 06:05

1

A little bit buggy, but if you set background-color for thead, this will hide bugs. Also, made with css-only: http://jsfiddle.net/HErQH/

answered Jul 01 '11 at 06:05

sigurd

3,071
4
29
37

when i used `position:fixed` , my thead went outside of page – Vivek Jul 01 '11 at 06:18
Yes, because i'm duplicating header to save the table layout, nut you can hide the fake header, like this [updated](http://jsfiddle.net/wA5kF/) – sigurd Jul 01 '11 at 06:24
it's not working in my page..i don't know whats going wrong...ohhh god... – Vivek Jul 01 '11 at 06:43
Can you give me the link to your page, where it fails? – sigurd Jul 01 '11 at 08:04
it's a on development server..so it's not accessible on web. :( – Vivek Jul 01 '11 at 09:09

How to fix header of table

2 Answers2