开发者

How to fix header of table [duplicate]

This question already has answers here: Closed 11 years ago.

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 开发者_Go百科example that would be a great help for me.

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


you can find it right here Fix the header

AND demo from here Demo is here


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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜