表頭固定，表的主體設置滾動條，同時解決錯位問題

項目中遇到的問題，需要表頭固定，給表體設置滾動條，搜了很多種方法，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>