脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → bootstrap table 表头

BootStrap的table表头固定tbody滚动的实例代码

 更新时间：2016年08月24日 10:35:24   作者：bbsyi  
本文给大家分享一段关于BootStrap的table表头固定tbody滚动的实例代码,代码简单易懂，需要的朋友可以参考下

关于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" 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>

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

您可能感兴趣的文章:

相关文章

  • jQuery实现炫丽的3d旋转星空效果

    jQuery实现炫丽的3d旋转星空效果

    这篇文章主要介绍了jQuery实现炫丽的3d旋转星空效果,涉及jQuery数值运算与页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 在UpdatePanel内jquery easyui效果失效的解决方法

    在UpdatePanel内jquery easyui效果失效的解决方法

    项目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好处自然是页面不刷新，用户感觉比较好，同时也减少了一部分数据量的传输。
    2010-04-04
  • jQuery中attr()方法用法实例

    jQuery中attr()方法用法实例

    这篇文章主要介绍了jQuery中attr()方法用法,实例分析了attr()方法的功能、定义及设置或返回匹配元素属性值的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery插件实现可输入和自动匹配的下拉框

    jQuery插件实现可输入和自动匹配的下拉框

    这篇文章主要为大家详细介绍了jQuery插件实现可输入和自动匹配的下拉框,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery滚动条插件nanoscroller使用指南

    jQuery滚动条插件nanoscroller使用指南

    本文给大家介绍的nanoScrollerJS是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的jQuery插件。该滚动条插件利用原生的滚动条可以工作在 iPad、iPhone 和一些 Android Tablets上。
    2015-04-04
  • jquery.post用法关于type设置问题补充

    jquery.post用法关于type设置问题补充

    当使用ajax获取data数据的时候，直接data.foo就可以得到。而较低版本的jquery就不行比如1.4之前，下面为大家介绍下jquery.post用法关于type设置问题
    2014-01-01
  • JQuery CheckBox（复选框）操作方法汇总

    JQuery CheckBox（复选框）操作方法汇总

    这篇文章主要介绍了JQuery CheckBox（复选框）操作方法汇总,本文讲解了获取单个checkbox选中项、获取多个checkbox选中项、设置第一个checkbox 为选中值、设置最后一个checkbox为选中值等内容,需要的朋友可以参考下
    2015-04-04
  • jquery 实现返回顶部功能

    jquery 实现返回顶部功能

    本文给大家带来的是使用javascript结合jQuery实现返回顶部的功能，并附上源码，送给大家，需要的童鞋直接拿走吧
    2014-11-11
  • 不定义JQuery插件 不要说会JQuery

    不定义JQuery插件 不要说会JQuery

    不定义JQuery插件，不要说会JQuery，为什么这么说，请看下文
    2016-03-03
  • 读jQuery之三（构建选择器）

    读jQuery之三（构建选择器）

    前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。
    2011-06-06

最新评论