table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。
找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed;
原理很简单，有爱研究的童鞋可以去css官网看看说明文档。
直接贴代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>转载自·威易网CSS教程</title>
<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="80%" border="1">
<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固定，tbody有滚动条，关键是都对齐的纯css写法。的更多相关文章
- 纯CSS,table的thead固定,tbody显示滚动条
以下代码,仅在谷歌下测试过 首先是html的table的代码: <table class="tablediv" id="myTable" border=& ...
- table标签中thead、tbody、tfoot的作用
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...
- 关于boostrap的thead固定tbody滚动
原文地址:http://blog.csdn.net/bbsyi/article/details/51126041# 1 <!DOCTYPE html> 2 <html> 3 & ...
- table左边固定-底部横向滚动条
是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表 ...
- Bootstrap表格中，thead固定，tbody有垂直滚动条
1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...
- table表格中实现tbody部分可滚动，且thead部分固定
1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...
随机推荐
- GIT 配置管理
git版本控制开发流程小结笔记(一) 收藏 何良瑞Nyanko君 ...
- charles抓包工具分享
今天,给大组内QA做了一次分享,主要面向移动端测试,介绍了我平时在测试工作中用到的功能,大家都积极响应,现场搭环境,现场操作,现场提问解答,最后大家都成功的利用起来了,感觉很有成就感.下面介绍我今天分 ...
- Python学习【第十一篇】模块(1)
模块 模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用. 简单地说,模块就是一个保 ...
- RabbitMQ学习之集群部署
我们先搭建一个普通集群模式,在这个模式基础上再配置镜像模式实现高可用,Rabbit集群前增加一个反向代理,生产者.消费者通过反向代理访问RabbitMQ集群. 架构图如下: 设计架构可以如下:在一个集 ...
- expdp ORA-31693 ORA-31617 ORA-19505 ORA-27037
使用expdp并行导出数据的时候报如下错误: Connected to: Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64b ...
- sp_helpdb
语法 sp_helpdb [ [ @dbname= ] 'name' ] 参数 [@dbname=] 'name' 是要为其提供信息的数据库名称.name 的数据类型为 sysname,无默认值.如果 ...
- 终端检测HTTPS服务端
nscurl --ats-diagnostics --verbose https:ssl.tianwensm.xyz
- C# DataTable中根据某Column值(不重复)获取该值所在行
System.Data.DataTable dt = new System.Data.DataTable(); dt.PrimaryKey = new System.Data.DataColumn[] ...
- 精华 对express中next函数的一些理解
关于next主要从三点来进行说明: next的作用是什么? 我们应该在何时使用next? next的内部实现机制是什么? Next的作用 我们在定义express中间件函数的时候都会将第三个参 ...
- 无限分页//////////////zz
由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态.因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿.传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击 ...