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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
js数组操作常用方法
May 08 Javascript
Javascript 数组排序详解
Oct 22 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 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
Yii2单元测试用法示例
2016/11/12 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
python单例模式实例分析
2015/04/08 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python 对象中的数据类型
2017/05/13 Python
python GUI实例学习
2017/11/21 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
农业项目建议书
2014/08/25 职场文书
高三复习计划
2015/01/19 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python