关于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可以优化显示. ...
随机推荐
- Sybase分页存储过程实现
项目中需要用到Sybase数据库的分页功能,想尽各种办法都没有成功,最后用如下的存储过程成功实现功能,记录备忘. ),@start int, @pageSize int as begin declar ...
- 黄聪：VPS用轻松备份工具备份Wordpress，文件夹通配符
db;log;wp-admin;wp-includes;temp;upgrade;twentyfourteen;twentyfifteen;twentysixteen;twentythirteen;t ...
- Centos下wget下载整个网站，或者目录全部文件
需要下载某个目录下面的所有文件.命令如下 wget -c -r -np -k -L -p www.xxx.org/pub/path/ 在下载时.有用到外部域名的图片或连接.如果需要同时下载就要用-H参 ...
- thinkPHP 视图
一.模板的使用 a.规则 模板文件夹下[TPL]/[分组文件夹/][模板主题文件夹/]和模块名同名的文件夹[Index]/和方法名同名的文件[index].html(.tp ...
- C# 堆栈和堆 Heap & Stack
首先堆栈和堆(托管堆)都在进程的虚拟内存中.(在32位处理器上每个进程的虚拟内存为4GB) 堆栈stack 堆栈中存储值类型. 堆栈实际上是向下填充,即由高内存地址指向低内存地址填充. 堆栈的工作方式 ...
- C# INotifyPropertyChanged使用方法
INotifyPropertyChanged 接口:向客户端发出某一属性值已更改的通知. NotifyPropertyChanged 接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通 ...
- MyBatis 的Mapper中有小于号的处理
<![CDATA[ select * from person t where t.birthday < #{birthday} ]]> 也可以进行转义: < < 小于号 ...
- Word常用实用知识1
Word常用实用知识1 纯手打,可能有错别字,使用的版本是office Word 2013 转载请注明出处,谢谢. 快速输入日期(含格式) [插入]--[日期] 快速输入日期和时间(快捷键) 快速 ...
- node源码详解（二 ）—— 运行机制 、整体流程
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource2 本博客同步在https://cnodejs.o ...
- SpringMVC通过实体类返回json格式的字符串,并在前端显示
一.除了搭建springmvc框架需要的jar包外,还需要这两个jar包 jackson-core-asl-1.9.2.jar和jackson-mapper-asl-1.9.2.jar 二.web,. ...