-1

I don't have any good solution to fix the head and column of a table which has following type 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>

and getting populated through ajax call, please provide a good solution in which I can use my previous css as well. (mean it will not require any css changes).

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1397770
  • 135
  • 3
  • 16
  • if you don't use colSpan in your header, this works pretty good http://fixedheadertable.com/ but if you use colSpan, the spanned columns will become hidden. – Ray Cheng May 23 '12 at 04:45
  • this link is good solution but i have to use their css.. can you tell how can i use this solution without changing my previous css .(and i want to fixedcolumn also) – user1397770 May 23 '12 at 04:59
  • repost of [How can we freeze first column and header(which have multiple rows) in html table](http://stackoverflow.com/questions/10612726/how-can-we-freeze-first-column-and-headerwhich-have-multiple-rows-in-html-tabl) Please don't do that. See http://meta.stackexchange.com/questions/7046/how-do-i-get-attention-for-old-unanswered-questions – jscs May 23 '12 at 05:01
  • yes i mention it .. because last time i not posted it with my table structure. – user1397770 May 23 '12 at 05:02
  • you have answered your own question already. and your answer is here: http://stackoverflow.com/a/6596029/310767 – Ray Cheng May 23 '12 at 05:06
  • its not mine and the solution is only to fix header not the first column as well... – user1397770 May 24 '12 at 08:47

2 Answers2

0

Use css for your solution.

Create first table for all columns that you need and only render the first fixed column values and for the rest create another table inside it.

And for the inside table give a specific width and height and give a css overflow:scroll;

May be this link can help you understand what I meant http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

Md. Alim Ul Karim
  • 2,401
  • 2
  • 27
  • 36
-1

you can try like this

<table>    
    <thead>        
        <tr>            
            <th colspan="4">Current</th>            
            <th colspan="4">New/Requested</th>        
        </tr>        
        <tr>            
            <th nowrap="nowrap">RSD aaaa</th>           
            <th nowrap="nowrap">CRSD aaaa</th>            
            <th nowrap="nowrap">MSD aaaa</th>            
            <th nowrap="nowrap">Open QTY aaaa</th>            
            <th nowrap="nowrap">CRD aaaa</th>            
            <th nowrap="nowrap">CRSD aaaa</th>           
            <th nowrap="nowrap">MSD aaaa</th>            
            <th nowrap="nowrap">Open QTY aaaa</th>            
            <th nowrap="nowrap">Action</th>            
            <th nowrap="nowrap">Reason</th>            
            <th nowrap="nowrap">Action Code Status </th>        
        </tr>
    </thead>
</table>
<div style='height: 150px; overflow: scroll;'>
<table> 
    <tbody>         
        <tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr><tr>             
            <td>a</td>              
            <td>a</td>         
        </tr>     
    </tbody> 
</table>
</div>
MR. X
  • 1
  • 1
  • you are right but according to ur solution header will shown with full width.what i need is that column Current New/Requested will be fix at the time of horizontal scrolling and header will be fix at vertical scrolling – user1397770 May 23 '12 at 04:45