手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >BootStrap的table表头固定tbody滚动的实例代码
BootStrap的table表头固定tbody滚动的实例代码
摘要:关于bootstraptable其他知识不多说,直接给大家贴代码了。关键代码如下所示:栏目一栏目二栏目三栏目一栏目二栏目三星期一星期二星期三...

关于bootstrap table其他知识不多说,直接给大家贴代码了。

关键代码如下所示:

<!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"> <div id="2"> <table> <thead> <tr> <th>栏目一</th> <th>栏目二</th> <th>栏目三</th> <th>栏目一</th> <th>栏目二</th> <th>栏目三</th> </tr> </thead> <tbody> <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>

以上所述是小编给大家介绍的BootStrap的table表头固定tbody滚动的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我们留言,小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持!

【BootStrap的table表头固定tbody滚动的实例代码】相关文章:

光标定位等TextRange的操作的范例代码

JavaScript中的pow()方法使用

javascript清空table表格的方法

jquery任意位置浮动固定层插件用法实例

JavaScript获得url查询参数的方法

jQuery的Scrollify插件实现滑动到页面下一节点

javascript实现树形菜单的方法

经典的带阴影的可拖动的浮动层

Bootstrap基础学习

javascript生成不重复的随机数

精品推荐
分类导航