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


Posted in Javascript onAugust 24, 2016

关于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滚动的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
vue分页插件的使用方法
Dec 25 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 #Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 #Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 #Javascript
JS简单实现无缝滚动效果实例
Aug 24 #Javascript
JS动态加载脚本并执行回调操作
Aug 24 #Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 #Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 #Javascript
You might like
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php遍历数组的方法分享
2012/03/22 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
DOM 中的事件处理介绍
2012/01/18 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Python内置异常类型全面汇总
2020/05/28 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
培训简讯范文
2015/07/20 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
asyncio异步编程之Task对象详解
2022/03/13 Python