脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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+iframe做一个ajax上传效果(实例)

    使用jquery+iframe做一个ajax上传效果(实例)

    下面小编就为大家带来一篇使用jquery+iframe做一个ajax上传效果(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • jQuery中DOM树操作之复制元素的方法

    jQuery中DOM树操作之复制元素的方法

    这篇文章主要介绍了jQuery中DOM树操作之复制元素的方法,实例分析了DOM树复制元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery实现切换页面过渡动画效果

    jQuery实现切换页面过渡动画效果

    这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下
    2015-10-10
  • JQuery 中几个类选择器的简单使用介绍

    JQuery 中几个类选择器的简单使用介绍

    类选择器想必很多喜欢jquery的朋友早早就涉及到了吧，它们的使用也应该了如指掌了吧，接下来帮大家温习下几个简单类选择器的使用方法，感兴趣的你可以参考下哈，希望对你有所帮助
    2013-03-03
  • jQuery+ajax实现动态添加表格tr td功能示例

    jQuery+ajax实现动态添加表格tr td功能示例

    这篇文章主要介绍了jQuery+ajax实现动态添加表格tr td功能,结合实例形式分析了jQuery基于ajax动态创建页面table元素相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • jQuery利用FormData上传文件实现批量上传

    jQuery利用FormData上传文件实现批量上传

    这篇文章主要为大家详细介绍了jQuery利用FormData上传文件实现批量上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Jquery 表格合并的问题分享

    Jquery 表格合并的问题分享

    有朋友问GridView控件对于跨行合并的问题，这可以用控件嵌套来完成，当然，我更喜欢在前台来用JS来控制网页元素的样式，而后台仅仅是根据客户的请求，来返回数据。
    2011-09-09
  • jquery显示loading图片直到网页加载完成的方法

    jquery显示loading图片直到网页加载完成的方法

    这篇文章主要介绍了jquery显示loading图片直到网页加载完成的方法,涉及jquery页面加载与动画效果的使用技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery 实现批量提交表格多行数据的方法

    jQuery 实现批量提交表格多行数据的方法

    今天小编就为大家分享一篇jQuery 实现批量提交表格多行数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • jQuery中mouseover事件用法实例

    jQuery中mouseover事件用法实例

    这篇文章主要介绍了jQuery中mouseover事件用法,以实例形式分析了mouseover事件处理鼠标指针滑过时的使用技巧,需要的朋友可以参考下
    2014-12-12

最新评论