表頭固定，表的主體設(shè)置滾動條，同時(shí)解決錯(cuò)位問題

nanchen2251 發(fā)布于2019-04-23 13:11 / 3469人閱讀

摘要：項(xiàng)目中遇到的問題，需要表頭固定，給表體設(shè)置滾動條，搜了很多種方法，也研究了一下。表頭放在中，表體放在中，給設(shè)置固定高度，加樣式，這樣在數(shù)據(jù)多的時(shí)候會出現(xiàn)滾動條，數(shù)據(jù)少的時(shí)候滾動條會消失。

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

下面是我們使用的方法。

表頭放在div1中，表體放在div2中，給div2設(shè)置固定高度，加樣式overflow:auto，這樣在數(shù)據(jù)多的時(shí)候會出現(xiàn)滾動條，數(shù)據(jù)少的時(shí)候滾動條會消失。

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

還有一個(gè)問題，因?yàn)闈L動條的存在，表頭和表體會出現(xiàn)錯(cuò)位：

　　解決方法1：通過colgroup或者css或者js，設(shè)置表頭中列的寬度和表體中對應(yīng)列的寬度為相同的固定值（像素值，百分比不行），最后一列不設(shè)置，最后一列寬度會根據(jù)有無滾動條而自適應(yīng)。但是還有個(gè)問題，如果窗口縮小，當(dāng)窗口寬度小于除了最后一列的前面列的寬度之和，那么還是會出現(xiàn)錯(cuò)位。這種方法最好用于給div1和div2設(shè)置固定寬度（像素值）的情況下。

　　解決方法2：使用js，根據(jù)表主體第一行中每列的寬度，設(shè)置表頭中每列的寬度，最后一列不設(shè)置，最后一列寬度會根據(jù)有無滾動條自適應(yīng)。這種方法即使再怎么變化窗口大小，都能保證不錯(cuò)位（頁面加載完成設(shè)置一下列寬度，window.onresize設(shè)置一下列寬度）。

        .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>計(jì)量單位th>
                    <th>庫存量th>
                    <th>最小安全庫存th>
                    <th>最大安全庫存th>
                    <th>缺口數(shù)量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>01td>
                    <td>C-02-01-01-001td>
                    <td>分合閘按鈕td>
                    <td>C1KR輸入輸出220VAC 50HZ KVAtd>
                    <td>個(gè)td>
                    <td>10td>
                    <td>12td>
                    <td>18td>
                    <td>2td>
                tr>
                tbody>
            table>
        div>