表頭固定，表的主體設置滾動條

項目中遇到的問題，需要表頭固定，給表主體設置滾動條。搜了很多種方法，bootstrap table也研究了一下。

下麵是我們使用的方法。

表頭放在div1中，表主體放在div2中，給div2設置固定高度，加樣式overflow:auto，這樣在數據多的時候會出現滾動條，數據少的時候滾動條會消失。

如果通過bootstrap給div2加類pre-scrollable，會存在一個問題，如果數據少的時候，滾動條還是會存在。

        .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;
        }
        #warningTableWrapperHead table,#warningTableWrapperHead table td,#warningTableWrapperHead table th{
            border-color:#2d323d;
            height:50px;
            line-height:50px;
            padding:0 0 0 10px;
        }
        #warningTableWrapperBody table,#warningTableWrapperBody table td,#warningTableWrapperBody table th{
            border-color:#2d323d;
            height:50px;
            line-height:50px;
            padding:0 0 0 10px;
        }


        /*滾動條樣式*/
        #warningTableWrapperBody::-webkit-scrollbar {/*滾動條整體樣式*/
            width: 8px;     /*高寬分別對應橫豎滾動條的尺寸*/
            height: 1px;
        }
        #warningTableWrapperBody::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
            border-radius: 0;
            /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
            background: #585dff;
        }
        #warningTableWrapperBody::-webkit-scrollbar-track {/*滾動條裡面軌道*/
            /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
            border-radius: 0;
            background: #2d323d;
        }

 <div class="warning_table_wrapper_head" id="warningTableWrapperHead" >
            <table class="table table-bordered" width="1040">
                <colgroup>
                    <col width="52">
                    <col width="142">
                    <col width="160">
                    <col width="258">
                    <col width="80">
                    <col width="66">
                    <col width="100">
                    <col width="100">
                    <col width="82">
                </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" id="warningTableWrapperBody">
            <table class="table table-bordered" width="1040">
                <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">
                    <col>
                </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>