项目中遇到的问题,需要表头固定,给表体设置滚动条,搜了很多种方法,bootstrap table也研究了一下。
下面是我们使用的方法。
表头放在div1中,表体放在div2中,给div2设置固定高度,加样式overflow:auto,这样在数据多的时候会出现滚动条,数据少的时候滚动条会消失。
如果通过bootstrap给div2加类pre-scrollable,会存在一个问题,如果数据少的时候,滚动条还是会存在。
还有一个问题,因为滚动条的存在,表头和表体会出现错位:
解决方法1:通过colgroup或者css或者js,设置表头中列的宽度和表体中对应列的宽度为相同的固定值(像素值,百分比不行),最后一列不设置,最后一列宽度会根据有无滚动条而自适应。但是还有个问题,如果窗口缩小,当窗口宽度小于除了最后一列的前面列的宽度之和,那么还是会出现错位。这种方法最好用于给div1和div2设置固定宽度(像素值)的情况下。
解决方法2:使用js,根据表主体第一行中每列的宽度,设置表头中每列的宽度,最后一列不设置,最后一列宽度会根据有无滚动条自适应。这种方法即使再怎么变化窗口大小,都能保证不错位(页面加载完成设置一下列宽度,window.onresize设置一下列宽度)。
.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>计量单位</th> <th>库存量</th> <th>最小安全库存</th> <th>最大安全库存</th> <th>缺口数量</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>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>