博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
阅读量:6037 次
发布时间:2019-06-20

本文共 1543 字,大约阅读时间需要 5 分钟。

找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了。里面有一个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>

 

 
 
你可能感兴趣的文章
cacti监控硬盘、内存、CPU
查看>>
redis的PHP扩展包安装方法
查看>>
通过微软认证所需费用
查看>>
mysql 备份命令
查看>>
关于NGINX异常
查看>>
linux命令:samb文件共享服务器配置
查看>>
Docker容器引导完整CentOS
查看>>
CISCO 交换机,端口安全配置实例。
查看>>
我看51CTO
查看>>
nodeJS调用函数
查看>>
霍金李开复张亚勤等纵论AI:关于创造和毁灭、创业和机遇的碰撞
查看>>
新手理解类和对象
查看>>
Linux磁盘分区及文件系统管理之基础概念
查看>>
各浏览器CSS hack兼容表:
查看>>
H3C HWTACACS配置
查看>>
mezzanine安装(python2.7+nginx+mysql+supervisor)
查看>>
Supervisord 远程命令执行漏洞(CVE-2017-11610)
查看>>
Retrofit2.0+ .Net MVC4(WebApi) 上传多张图片
查看>>
oracle静默安装文件db_install.rsp详解
查看>>
Redis详解(一)
查看>>