关于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可以优化显示. ...
随机推荐
- StackExchange.Redis 官方文档(一) Basics
基本使用方法: StackExchange.Redis的核心是 StackExchange.Redis 命名空间的 ConnectionMultiplexer 类;它隐藏了多服务器的实现细节.Conn ...
- Mysql的收获
今天公司的业务需求中,遇到一个很郁闷的情况. 有一个申请记录,缺少申请原因的字段. 我以为很简单,采用left jion 很容易获取到申请原因. SELECT a.*,b.RealName,c.Dep ...
- C语言－表达式
表达式是使用运算符连接起来的式子,C语言中的表达式有以下几种: 1.算数运算符 + - * / % 2.赋值运算符 += -= *= /= %= 3.自增.自减 ++ -- a++为先 ...
- Ubuntu Linux下设置IP的配置命令
Ubuntu Linux下设置IP的配置命令 今天装了Ubuntu,但是发现不能上网,开始排查问题: 1.首先确定网络连接是否正确,所用的网线是否可以正常工作 2.查看网卡是否能正常工作,检测的方法如 ...
- 在DataGrid中实现Button Command
Command="{Binding butCommand}"会默认查找ListViewItems中对象的属性,而你的ListViewItems中对象应该不包括butCommand属 ...
- 2.9. Scalar Properties for Primitive Data Types 选项（Core Data 应用程序实践指南）
该选项的意思是,“用Scalar特性来表示原始数据类型”.什么意思,妈妈米呀,这是我学这门课程遇到的最难懂的概念. scalar properties,是复数,也就是说是 “分等级的属性”.那么,大概 ...
- iframe截取网站部分内容实现思路及代码
使用iframe可以截取网站的部分内容,主要配合width.height.overflow等属性来实现的,具体示例如下,需要的朋友不要错过. <div style="width:630 ...
- Oracle 11gR2 RAC ohasd failed to start 解决方法
rcrCRS-4124: Oracle High Availability Services startup failed. CRS-4000: Command Start failed, or co ...
- ImageView及其子类（一）
ImageView继承自View组件,它的主要功能是用于显示图片——实际上这个书法不太严谨因为他能显示的不仅是图片,任何Drawable对象都可以使用ImageView来显示.除此之外,ImageVi ...
- datatable 使用详细说明
要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理.以下是在进行dataTable绑定处理时候可以附加的参数: ...