关于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可以优化显示. ...
随机推荐
- IOS 实现TXT文本自动识别编码的方法
from :http://kyoworkios.blog.51cto.com/878347/1344013 TXT识别编码是个复杂的问题.幸好有c/c++的一个库能识别. 库的叫uchardet,可以 ...
- mongodb学习(五) 查询
1. 按条件查询: db.users.find({"name":"MM1"}) 2.find的第二个参数可以指定要返回的字段:这里1 表示要显示的字段,0 表示 ...
- Xcode7中 添加 .dylib
转一个 Xcode 7 缺少 *.dylib库的解决方法 Xcode7中 Link Binary With Libraries 没有 .dylib库,只能找到对应的 .tbd,但不能代替使用,通过查找 ...
- Django with uWSGI and nginx
Reference:http://uwsgi-docs.readthedocs.org/en/latest/tutorials/Django_and_nginx.html Setting up Dja ...
- Variation of e.touches, e.targetTouches and e.changedTouches
We have the following lists: touches: A list of information for every finger currently touching the ...
- SQL迅速增加表中记录语句
很多时候我么需要为表中疯狂增加N条记录,那么我们该使用什么语句实现该功能呢?如下: insert into 表名(字段1,字段2,字段3....) select 字段1,字段2,字段3.... fr ...
- Java经典案例之-“成绩等级划分”
/** * 描述:在对话框中输入学习成绩,利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示, * 60分以下的用C表示. * 分析:可以利用三目运算符 ...
- 使IE6下PNG背景透明的七种方法任你选
原文地址:http://blog.csdn.net/mosliang/article/details/6760028 相信如何解决png在ie6下透明的问题困扰了很多人.为了追求更好的页面效果,很多人 ...
- javascript获取整数随机数
javascript获取整数随机数 // 从4到10的随机数,|0是生成正整数 var numBars = Math.random()*6+4|0; 也可以通过右移0位(或者左移0位)进行取整 var ...
- Java Swing Graphics Graphics2D的一般用法
Java Swing Graphics Graphics2D的一般用法: 贝塞尔曲线参考:http://www.zhangxinxu.com/wordpress/2014/06/deep-unders ...