table-首列冻结

秒速五厘米 2023-10-07 09:56 34阅读 0赞

### 首先，table外层套两层div，outerDiv和 innerDiv ###

### outerDiv和innerDiv的样式设置如下： ###

.outerDiv{
        
    	position: relative; 
    	overflow: hidden;
    }
    .innerDiv{
        
    	overflow: auto; 
    	padding-left: 230px; // padding-left是固定列的宽度
    }

### 设置table的样式： ###

注： 第一列position设为absolute

.table{
        font-size: 12px;  width: 100%;border-spacing:0px; table-layout: fixed;border-bottom:0px; padding: 0px; margin:0px;border-collapse:collapse;font-weight: bold;}
    .thead {
        border-spacing: 0px; }
    .thead tr{
         height: 38px; line-height: 38px;font-size: 14px;}
    .tbody{
        text-align: center; font-weight: bold; clear: both;border-spacing: 0px;}
    .tbody tr td{
        font-size: 14px;font-weight: bold;padding: 20px 0px; min-height: 30px;vertical-align: top;}
    .tbody tr td:nth-child(1),.thead_f th:nth-child(1){
        text-align: left;padding-left: 30px;}
    .table th:first-child, .table td:first-child{
        position: absolute;left: 0px; width: 200px; border-right: 1px solid #DFE2E6;}

### ps： 重要的一点，为了保证固定列高度和其他高度保持一致，需要遍历没一行，判断高度，并设置 ###

$('.table td:first-child').each(function(){
        
        var td_height = $(this).outerHeight();
        var tr_height = $(this).parent().outerHeight();
        if (td_height > tr_height) {
        
          $(this).parent().height(td_height);
        } else if (td_height < tr_height) {
        
          $(this).outerHeight(tr_height);
        }
    });

### 最终效果如下： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTcwNjA3_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200225124410298.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTcwNjA3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225124355987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTcwNjA3,size_16,color_FFFFFF,t_70
[20200225124410298.png]: https://img-blog.csdnimg.cn/20200225124410298.png