手机
当前位置:查字典教程网 >编程开发 >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滚动的实例代码】相关文章:

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

javascript生成不重复的随机数

在页面中输出当前客户端时间javascript实例代码

mouse_on_title.js

js跨域请求的5中解决方式

popdiv

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

显示行号的文本输入框

JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)

JavaScript正则表达式的分组匹配详解

精品推荐
分类导航