bootstrap的table表头固定tbody滚动
2016-04-11 21:47
555 查看
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script src="iscroll.js"></script> </head> <body> <div id="con" class="container"> <div id="2"> <table class="table table-bordered scrolltable"> <thead style="display:block;overflow-y: scroll;border-bottom:1px solid #eee;"> <tr> <th>栏目一</th> <th>栏目二</th> <th>栏目三</th> <th>栏目一</th> <th>栏目二</th> <th>栏目三</th> </tr> </thead> <tbody style="display:block; max-height:200px;overflow-y: scroll;"> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> </tbody> </table> </div> </div> </body> <script type="text/javascript"> $(document).ready(function(){ var _width=$('#2').width(); $('#2 th:first-child').width(_width*0.1); $('#2 td:first-child').width(_width*0.1); $('#2 th:nth-child(2)').width(_width*0.2); $('#2 td:nth-child(2)').width(_width*0.2); $('#2 th:nth-child(3)').width(_width*0.3); $('#2 td:nth-child(3)').width(_width*0.3); $('#2 th:nth-child(4)').width(_width*0.1); $('#2 td:nth-child(4)').width(_width*0.1); $('#2 th:nth-child(5)').width(_width*0.1); $('#2 td:nth-child(5)').width(_width*0.1); $('#2 th:nth-child(6)').width(_width*0.2); $('#2 td:nth-child(6)').width(_width*0.2); }) </script> </html>
相关文章推荐
- Bootstrap3&nbsp;兼容IE8&nbsp;初步
- 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具
- 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板
- JS组件系列——Bootstrap Select2组件使用小结
- bootstrap3入门一(栅格系统)
- web 按钮Loading...的实现 with Bootstrap
- bootstrap 划分12列
- bootstrap起步文件
- bootstrap的js相关
- bootstrap实现pause/play键切换
- 基于bootstrap 框架
- Flask学习笔记-使用bootstrap-datepicker实现页面日期选择
- 学习bootstrap框架的demo
- Bootstrap入门
- bootstrap:前端开发案例Demo(二)
- bootstrap 列表--水平定义列表
- 解决Bootstrap模态窗口Modal中使用Kindeditor或UEditor编辑器第二次无法加载的问题
- 2016 最好的Bootstrap 管理模板
- bootstrap 文本对齐风格
- bootstrap 强调相关的类