table 的thead th 固定 tbody滚动例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
注意这里的style是重点!!!
<style>
table tbody {
display:block;
height:195px;
overflow-y:scroll;
} table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
} table thead {
width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>
</head> <body>
<table width="100%">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三封</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴与四十大盗</td>
</tr>
<tr>
<td>张小三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>腾讯科技</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>浏阳河就业</td>
</tr>
<tr>
<td>张三疯子</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张大三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三五</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张刘三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>1990-9-9</td>
<td>13682299090</td>
<td>阿里巴巴</td>
</tr>
</tbody>
</table>
</body>
</html>
table 的thead th 固定 tbody滚动例子的更多相关文章
- 关于boostrap的thead固定tbody滚动
原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...
- table表格中实现tbody部分可滚动，且thead部分固定
1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...
- table头部、尾部固定;中间内容定高自适应滚动
table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- table之thead兼容
今天遇到一个小bug,是关于table中thead,tbody,tfoot的兼容问题: 在开发的时候为了方便写样式,我就把表格的标题部分关于th的内容放在了thead中,当然了,我也没有写tbody和 ...
- Html table、thead、tr、th、td 标签
Html table.thead.tr.th.td 标签 案例一 <!-- table 表格标签,配置表格使用.border="1" 添加表格框架 --> <ta ...
- css设置背景固定不滚动效果的示例
css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...
- 纯CSS,table的thead固定,tbody显示滚动条
以下代码,仅在谷歌下测试过 首先是html的table的代码: <table class="tablediv" id="myTable" border=& ...
- 网页制作中在头部固定悬浮table表头(thead)的方法
这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简 ...
随机推荐
- PL/SQL学习（五）异常处理
原文参考:http://plsql-tutorial.com/ 组成: 1) 异常类型 2) 错误码 3) 错误信息 代码结构: DECLARE Declaration section BEGIN ...
- thinkPHP add、save无法添加、修改不起作用
案例:数据库新添加一字段,修改值不成功.解决方案:将Runtime/Data/_fields/下面的字段缓存删除,或者直接删除整个Runtime文件也是可以的分析:由于Thinkphp,采用字段缓存机 ...
- python 数据类型（元组(不可变列表)，字符串
元组(不可变列表) 创建元组: ages = (11, 22, 33, 44, 55) 或 ages = tuple((11, 22, 33, 44, 55)) 一般情况下是不需要被人该的数值才使用元 ...
- Mvc 分页栏扩展方法
using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...
- 解决java.lang.NoClassDefFoundError: org.jdom.Content
报错:java.lang.NoClassDefFoundError: org.jdom.Content 解决办法: 更新lib目录下的jdom.jar 至最新版本.
- how to develop mobile web
http://blog.templatemonster.com/2010/05/11/how-make-mobile-website-6-easy-tips/ http://mobile.smashi ...
- 深入解析java虚拟机-jvm运行机制
转自oschina 一:JVM基础概念 JVM(Java虚拟机)一种用于计算设备的规范,可用不同的方式(软件或硬件)加以实现.编译虚拟机的指令集与编译微处理器的指令集非常类似.Java虚拟机包括一套字 ...
- 用PYTHON + PYWIN32 + WMI获取WINDOWS系统基本信息
网上原码,去了DECODE编码的问题. PyScripter这个PYTHON的IDE工具在WIN下表现不错哟. 感觉比SPYDER,ERIC,SUBLEME TEXT3之类的好用呀.. #!/usr/ ...
- 有关ARM大小端及网络字节序
http://blog.sina.com.cn/s/blog_62b250b50101ntjs.html
- NAND FLASH的容量、特性、市场和应用
NAND Flash的容量 一直到2006年,MLC芯片的容量每年都成倍数增长:由于NAND Flash的制程升级的挑战越来越大,所以NAND Flash之后的容量成倍增长所需要的时间也在不断增加 ...