css手写一个表头固定

摘要：等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。

Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定
主要遇到的个问题就是固定以后数据表格与表头的对齐问题，也看了很多我文章试下来都不怎么成功,只好自己一点点试
表头固定的一般思路是布两个table，一个放表头，一个放表格体，然后将表格体加上高度height以及overflow-y

    

    

    
            
        

            
                
                
                
                
                
                
                
                
                
                
                
                
                

            
缩略图
            
标题
            
总价
            
总销量
            
周销量
            
增幅
            
商品评分
            
分配开发
            
SKU
            
商品状态
            
审核备注
            
时间
            
操作
        
    
    
    

    
            
            

            
                
                
                
                
                
                
                
                
                
                
                
                
                

                

                    
此处应有图片
                    
Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                    
0.99
                    
13113
                    
107
                    
-21%
                    
5.0
                    
张乐
                    
abcadawdadawdawdadad
                    
开发成功
                    
备注
                    
上架:2016-07-02
                        采集:2018-06-25
                    
增加
                
                

                        
此处应有图片
                        
Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        
0.99
                        
13113
                        
107
                        
-21%
                        
5.0
                        
张乐
                        
abcadawdadawdawdadad
                        
开发成功
                        
备注
                        
上架:2016-07-02
                            采集:2018-06-25
                        
增加
                
                

                        
此处应有图片
                        
Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        
0.99
                        
13113
                        
107
                        
-21%
                        
5.0
                        
张乐
                        
abcadawdadawdawdadad
                        
开发成功
                        
备注
                        
上架:2016-07-02
                            采集:2018-06-25
                        
增加
                
                

                        
此处应有图片
                        
Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        
0.99
                        
13113
                        
107
                        
-21%
                        
5.0
                        
张乐
                        
abcadawdadawdawdadad
                        
开发成功
                        
备注
                        
上架:2016-07-02
                            采集:2018-06-25
                        
增加
                
                

                        
此处应有图片
                        
Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        
0.99
                        
13113
                        
107
                        
-21%
                        
5.0
                        
张乐
                        
abcadawdadawdawdadad
                        
开发成功
                        
备注
                        
上架:2016-07-02
                            采集:2018-06-25
                        
增加
                
            
    
    

两个table定义的不一致也就导致了表头与表格的不对齐，这里需要使用将两个表格的列宽定义一致

在两个table标签下都定义一下相同的,注意列数与表格列数相同，最后一列可以不要定义固定的宽

可以看出来还是没有对齐，这里有两个问题，一是：表体加上滚动条后会占约17px的宽度，第二个是表格的列宽table-layout默认取值automatic是随单元格内容撑起来的，所以要对这两个做调整。我的方法是给表头加一个padding_right:17px;两个table都设定为table-layout：fixed
css代码

        .content{
            width: 80%;
        }
        table {
            width: 100%;
            border-collapse : collapse; 
            border:1px solid #ccc;
            color:#4c4c4c;
        }
        th,td{
            padding:5px;
        }
        .table_body{
            height:312px;
            overflow-y: scroll;
        }
        .table_head{
            padding-right: 17px;
        }
        .table_body table,.table_head table{
            table-layout: fixed;
        }

这样就完美对齐了，适合任意屏幕宽度

有几个需要注意的地方我的两个表格都使用div包裹起来，主要是由于表格display:table属性导致padding,overflow等属性很难设置上去，因此可以设置到外包裹的div上，毕竟table布局水真的深，一时还不敢碰