javascript - HTMLテーブルの最初の列とヘッダーをフリーズするにはどうすればよいですか

Question

次のタイプの構造を持つテーブルのヘッドと列を修正するための適切なソリューションはありません。

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

そして、ajax呼び出しを介してデータが入力されるように、以前のcssも使用できる優れたソリューションを提供してください。（つまり、cssの変更は必要ありません）。

Answer 1

ソリューションには css を使用してください。

必要なすべての列に対して最初のテーブルを作成し、最初の固定列の値のみをレンダリングし、残りについてはその中に別のテーブルを作成します。

内側のテーブルには、特定の幅と高さを指定し、css の overflow:scroll; を指定します。

このリンクは、私が何を意味するのかを理解するのに役立つかもしれませんhttp://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

Answer 2

あなたはこのように試すことができます

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