关于boostrap的thead固定tbody滚动
原文地址：http://blog.csdn.net/bbsyi/article/details/51126041#
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <meta charset="UTF-8">
6 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
7 <script type="text/javascript" src="js/bootstrap.min.js"></script>
8 <script type="text/javascript" src="js/jquery.min.js"></script>
9 <script src="iscroll.js"></script>
10 </head>
11
12 <body>
13 <div id="con" class="container">
14 <div id="2">
15 <table class="table table-bordered scrolltable">
16 <thead style="display:block;overflow-y: scroll;border-bottom:1px solid #eee;">
17 <tr>
18 <th>栏目一</th>
19 <th>栏目二</th>
20 <th>栏目三</th>
21 <th>栏目一</th>
22 <th>栏目二</th>
23 <th>栏目三</th>
24 </tr>
25 </thead>
26 <tbody style="display:block; max-height:200px;overflow-y: scroll;"> <!--max-height限制tbody高度-->
27 <tr>
28 <td>星期一</td>
29 <td>星期二</td>
30 <td>星期三</td>
31 <td>星期一</td>
32 <td>星期二</td>
33 <td>星期三</td>
34 </tr>
35 <tr>
36 <td>星期一</td>
37 <td>星期二</td>
38 <td>星期三</td>
39 <td>星期一</td>
40 <td>星期二</td>
41 <td>星期三</td>
42 </tr>
43 <tr>
44 <td>星期一</td>
45 <td>星期二</td>
46 <td>星期三</td>
47 <td>星期一</td>
48 <td>星期二</td>
49 <td>星期三</td>
50 </tr>
51 <tr>
52 <td>星期一</td>
53 <td>星期二</td>
54 <td>星期三</td>
55 <td>星期一</td>
56 <td>星期二</td>
57 <td>星期三</td>
58 </tr>
59 <tr>
60 <td>星期一</td>
61 <td>星期二</td>
62 <td>星期三</td>
63 <td>星期一</td>
64 <td>星期二</td>
65 <td>星期三</td>
66 </tr>
67 <tr>
68 <td>星期一</td>
69 <td>星期二</td>
70 <td>星期三</td>
71 <td>星期一</td>
72 <td>星期二</td>
73 <td>星期三</td>
74 </tr>
75 <tr>
76 <td>星期一</td>
77 <td>星期二</td>
78 <td>星期三</td>
79 <td>星期一</td>
80 <td>星期二</td>
81 <td>星期三</td>
82 </tr>
83 <tr>
84 <td>星期一</td>
85 <td>星期二</td>
86 <td>星期三</td>
87 <td>星期一</td>
88 <td>星期二</td>
89 <td>星期三</td>
90 </tr>
91 </tbody>
92 </table>
93 </div>
94 </div>
95 </body>
96 <script type="text/javascript">
97 $(document).ready(function(){
98 var _width=$('#2').width(); //调整列宽
99 $('#2 th:first-child').width(_width*0.1);
100 $('#2 td:first-child').width(_width*0.1);
101 $('#2 th:nth-child(2)').width(_width*0.2);
102 $('#2 td:nth-child(2)').width(_width*0.2);
103 $('#2 th:nth-child(3)').width(_width*0.3);
104 $('#2 td:nth-child(3)').width(_width*0.3);
105 $('#2 th:nth-child(4)').width(_width*0.1);
106 $('#2 td:nth-child(4)').width(_width*0.1);
107 $('#2 th:nth-child(5)').width(_width*0.1);
108 $('#2 td:nth-child(5)').width(_width*0.1);
109 $('#2 th:nth-child(6)').width(_width*0.2);
110 $('#2 td:nth-child(6)').width(_width*0.2);
111 })
112 </script>
113 </html>
关于boostrap的thead固定tbody滚动的更多相关文章
- 纯CSS,table的thead固定,tbody显示滚动条
以下代码,仅在谷歌下测试过 首先是html的table的代码: <table class="tablediv" id="myTable" border=& ...
- table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Bootstrap表格中，thead固定，tbody有垂直滚动条
1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- thead、tbody、tfoot与顺序无关
今天发现一个问题,thead.tbody.tfoot等标签的内容排版与顺序无关,做了一个小的实验:
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
- table标签中thead、tbody、tfoot的作用
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...
- Html标签中thead、tbody、tfoot的作用
Html标签中thead.tbody.tfoot的作用 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示. ...
随机推荐
- 最新的thinkphp 后台入口的问题
新的thinkphp后台入口绑定了单独了文件 admin.php 要注意.
- 《C++ Primer》 chapter 15 TextQuery
<C++ Primer>中第15章为了讲解面向对象编程,举了一个例子:设计一个小程序,能够处理查询给定word在文件中所在行的任务,并且能够处理“非”查询,“或”查询,“与”查询.例如执行 ...
- PHP与MySql建立连接
通过PHP脚本建立与一个MySQL数据库的连接时,数据库服务器的主机位置(在本地就是localhost).用户名(root).密码.和数据库名是必须的.一旦建立连接,脚本就能执行SQL命令.二者联系的 ...
- iOS 之 内嵌网页
现在iOS 有两种内嵌网页的技术,一种是UIWebView,而另一种WKWebView则是iOS8之后出现的技术. iOS 之 UIWebView WKWebView
- 用while判读循环语句1+1/2!+1/3!+...1/20!的和阶乘的计算方法 式:n!=n*(n-1)!
package com.chongrui.test; /* *用while判读循环语句1+1/2!+1/3!+...1/20!的和 *使用BigDecimal类完成大数字与高精度运算 公式:n!=n* ...
- Storm学习笔记六
1 Storm的通信机制 说明:1.worker与worker之间跨进程通信: 2.worker内部中各个executor间的通信,Task对象--->输入队列queue--->执行--- ...
- MySQL批量导出以某数字或字母开头的表
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1852178 情景:我 ...
- C语言的指针使用
今天老师总结了一下指针内容,感觉对理解指针有帮助, 1.大家在使用指针的时候容易忽略掉指针所在的位置. 假如定义一个变量int a=10: int *p: p=&a; //p中存放变量 ...
- js原生设计模式——9外观模式封装
1.事件处理程序兼容性封装 <!DOCTYPE html><html lang="en"><head> <meta charset= ...
- Scrum
Scrum[编辑] 维基百科,自由的百科全书 Scrum是一种敏捷软件开发的方法学,用于迭代式增量软件开发过程.Scrum在英语是橄榄球运动中争球的意思. 虽然Scrum是为管理软件开发项目而开发 ...