Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定
主要遇到的个问题就是固定以后数据表格与表头的对齐问题，也看了很多我文章试下来都不怎么成功,只好自己一点点试
表头固定的一般思路是布两个table，一个放表头，一个放表格体，然后将表格体加上高度height以及overflow-y
<div class="content">
<div class="table_head">
<table border>
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="5%" />
<col width="5%"/>
<col width="5%"/>
<col width="10%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col"/>
</colgroup>
<thead>
<th>缩略图</th>
<th>标题</th>
<th>总价</th>
<th>总销量</th>
<th>周销量</th>
<th>增幅</th>
<th>商品评分</th>
<th>分配开发</th>
<th>SKU</th>
<th>商品状态</th>
<th>审核备注</th>
<th>时间</th>
<th>操作</th>
</thead>
</table>
</div>
<div class="table_body">
<table border>
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="5%" />
<col width="5%"/>
<col width="5%"/>
<col width="10%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col"/>
</colgroup>
<tbody>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
<tr>
<td>此处应有图片</td>
<td>Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor</td>
<td>0.99</td>
<td>13113</td>
<td>107</td>
<td>-21%</td>
<td>5.0</td>
<td>张乐</td>
<td>abcadawdadawdawdadad</td>
<td>开发成功</td>
<td>备注</td>
<td>上架:2016-07-02
采集:2018-06-25</td>
<td>增加</td>
</tr>
</tbody>
</table>
</div>
两个table定义的不一致也就导致了表头与表格的不对齐，这里需要使用<colgroup>将两个表格的列宽定义一致
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="5%" />
<col width="5%"/>
<col width="5%"/>
<col width="10%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col width="10%"/>
<col width="5%"/>
<col"/>
</colgroup>在两个table标签下都定义一下相同的<colgroup>,注意列数与表格列数相同，最后一列可以不要定义固定的宽
可以看出来还是没有对齐，这里有两个问题，一是：表体加上滚动条后会占约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布局水真的深，一时还不敢碰