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

网络编程 2021-07-04 20:00www.168986.cn编程入门

本文给大家分享一段关于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(_width0.1); 
$('#2 td:first-child').width(_width0.1); 
$('#2 th:nth-child(2)').width(_width0.2); 
$('#2 td:nth-child(2)').width(_width0.2); 
$('#2 th:nth-child(3)').width(_width0.3); 
$('#2 td:nth-child(3)').width(_width0.3); 
$('#2 th:nth-child(4)').width(_width0.1); 
$('#2 td:nth-child(4)').width(_width0.1); 
$('#2 th:nth-child(5)').width(_width0.1); 
$('#2 td:nth-child(5)').width(_width0.1); 
$('#2 th:nth-child(6)').width(_width0.2); 
$('#2 td:nth-child(6)').width(_width0.2); 
}) 
</script> 
</html>

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

上一篇：BootStrap table表格插件自适应固定表头(超好用) 下一篇：JS基于HTML5的canvas标签实现炫目的色相球动画效果

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设