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

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

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:@media 媒体查询

下一篇:Flex 常用布局