首页 > > 网页制作 > css >

表头固定，表的主体设置滚动条

2018-11-13 07:32:22来源：博客园阅读 ()

项目中遇到的问题，需要表头固定，给表主体设置滚动条。搜了很多种方法，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>