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>

我们如何在html表中冻结第一列和标题

2 个答案: