css手写一个表头固定

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布局水真的深，一时还不敢碰