windows7 ultimate,村庄离奇消失,他一定很爱你伴奏
项目中遇到的问题,需要表头固定,给表主体设置滚动条。搜了很多种方法,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>
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论