关于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数据存储
[reference]http://www.infoq.com/cn/articles/data-storage-in-ios 谈到数据储存,首先要明确区分两个概念,数据结构和储存方式.所谓数据结构就 ...
- 今天学习了下，如何破解wifi
破解了隔壁的wif,得罪了,哥哥要蹭网一段时间. 主要思路:安装linux环境.这里我选择了虚拟机加cdlinux .运行里面的min抓得握手包,然后淘宝花10元跑下包,因为自己的电脑不行,跑费时间太 ...
- 实时 Django 终于来了 —— Django Channels 入门指南
Reference: http://www.oschina.net/translate/in_deep_with_django_channels_the_future_of_real_time_app ...
- java 图片生成缩略图后，转化成流
功能:图片生成缩略图后,转化成流 public class ImageUtils { /** * * @param in1 * 文件流 * @param uploadFileName * 文件名称 * ...
- AP聚类算法(转)
Affinity Propagation (AP) 聚类是2007年在Science杂志上提出的一种新的聚类算法.它根据N个数据点之间的相似度进行聚类,这些相似度可以是对称的,即两个数据点互相之间的相 ...
- centos5.5 Apache2 Web 服务器的安装
# vi /etc/httpd/conf/httpd.conf 把以下虚拟机的配置加在 httpd.conf 文件末尾即可 NameVirtualHost *:80 // ...
- PHP简单分页类
<?php /* * ********************************************* * @类名: page * @参数: $myde_total - 总记录数 * ...
- JavaScript中typeof和instanceof深入详解
这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...
- Spring @Transactional使用的示例
Spring @Transactional使用的示例: 参考: http://blog.csdn.net/seng3018/article/details/6690527 http://blog.si ...
- 在windows下运行spark
1.下载spark:spark-2.0.0-bin-hadoop2.7.tgz 2.解压至D:\bigdata\spark-2.0.0-bin-hadoop2.7 3.配置环境变量 HADOOP_HO ...