表头固定，表的主体设置滚动条，同时解决错位问题

项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，bootstrap table也研究了一下。

下面是我们使用的方法。

表头放在div1中，表体放在div2中，给div2设置固定高度，加样式overflow:auto，这样在数据多的时候会出现滚动条，数据少的时候滚动条会消失。

如果通过bootstrap给div2加类pre-scrollable，会存在一个问题，如果数据少的时候，滚动条还是会存在。

还有一个问题，因为滚动条的存在，表头和表体会出现错位：

　　解决方法1：通过colgroup或者css或者js，设置表头中列的宽度和表体中对应列的宽度为相同的固定值（像素值，百分比不行），最后一列不设置，最后一列宽度会根据有无滚动条而自适应。但是还有个问题，如果窗口缩小，当窗口宽度小于除了最后一列的前面列的宽度之和，那么还是会出现错位。这种方法最好用于给div1和div2设置固定宽度（像素值）的情况下。

　　解决方法2：使用js，根据表主体第一行中每列的宽度，设置表头中每列的宽度，最后一列不设置，最后一列宽度会根据有无滚动条自适应。这种方法即使再怎么变化窗口大小，都能保证不错位（页面加载完成设置一下列宽度，window.onresize设置一下列宽度）。

        .warning_table_wrapper_head{
            width:1040px;
            height:50px;
            margin-left:30px;
            margin-top:20px;
        }
        .warning_table_wrapper_body{
            width:1040px;
            height:226px;
            margin-left:30px;
            overflow:auto;
        }

 　　　　<div class="warning_table_wrapper_head">
            <table class="table table-bordered">
                <colgroup>
                    <col width="51">
                    <col width="142">
                    <col width="160">
                    <col width="258">
                    <col width="80">
                    <col width="66">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>物资编码</th>
                    <th>物资名称</th>
                    <th>型号</th>
                    <th>计量单位</th>
                    <th>库存量</th>
                    <th>最小安全库存</th>
                    <th>最大安全库存</th>
                    <th>缺口数量</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="warning_table_wrapper_body">
            <table class="table table-bordered">
                <colgroup>
                    <col width="51">
                    <col width="142">
                    <col width="160">
                    <col width="258">
                    <col width="80">
                    <col width="66">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <tbody>
                <tr>
                    <td>01</td>
                    <td>C-02-01-01-001</td>
                    <td>分合闸按钮</td>
                    <td>C1KR输入输出220VAC 50HZ KVA</td>
                    <td>个</td>
                    <td>10</td>
                    <td>12</td>
                    <td>18</td>
                    <td>2</td>
                </tr>
                </tbody>
            </table>
        </div>