表头固定,表的主体设置滚动条
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>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:@media 媒体查询
下一篇:Flex 常用布局
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- HTML开发实例-简单相亲网站开发(主体为table) 2020-05-27
- 表格及表单属性 2020-03-10
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash