解决table中<thead>固定,只有列表数据滚动的问题
来源:互联网 发布:人工智能硬件解决方案 编辑:程序博客网 时间:2024/06/06 02:23
找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了。里面有一个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>固定,只有列表数据滚动的问题
- 解决table中<thead>固定,只有列表数据滚动的问题
- 滚动条下拉时 table 的thead 固定在网页固定在顶部不动
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- 头部固定悬浮table表头(thead)的方法
- 简单的自定义固定表头thead tbody滚动 第二版
- table表格,让thead固定,tbody有滚动条,纯css写法。
- HTML中table标签中thead、tbody、tfoot的作用
- table中head表头固定,body滚动
- table标签中thead、tbody、tfoot的作用
- table标签中thead、tbody、tfoot的作用
- table标签中thead、tbody、tfoot的作用
- table标签中thead、tbody、tfoot的作用
- table标签中thead、tbody、tfoot的作用
- 【HTML5】table标签中thead、tbody、tfoot的作用
- 动态修改table的thead
- bootstrap的table表头固定tbody滚动
- CSS设置table下tbody滚动条与thead对齐的方法
- android 音频播放总结 soundlPool,MediaPlay
- RabbitMQ与springmvc结合--简单示例
- JAVA中的线程安全与非线程安全
- 第八周 【项目4-字符串加密】
- Linux CPU core的电源管理(5)_cpu control及cpu hotplug
- 解决table中<thead>固定,只有列表数据滚动的问题
- 基于Token的WEB后台认证机制
- REDIS数据类型详解LIST-HASH-SET-STRING
- 软件调试笔记60
- 用java发送电子邮件
- 事件(四)
- 判断二分图 染色法 NYOJ 1015
- 远程桌面提示凭证不工作
- jdk7 WatchService 监控文件夹