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 溢出：滚动；

可能这个链接可以帮助你理解我的意思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>