table表格，让thead固定，tbody有滚动条

最新推荐文章于 2024-05-16 17:50:49 发布

星辰大海2020

最新推荐文章于 2024-05-16 17:50:49 发布

阅读量1.5k

点赞数 1

分类专栏： Web 文章标签： css

原文链接：https://www.cnblogs.com/webSong/p/6242444.html

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。

**
找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed;

原理很简单，有爱研究的童鞋可以去css官网看看说明文档。

转载自：博客园：webSong https://www.cnblogs.com/webSong/p/6242444.html

直接贴代码：(css部分)

转载自·威易网CSS教程

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;}

姓名	年龄	出生年月	手机号码	单位
张三	18	1990-9-9	13682299090	阿里巴巴
张三封	18	1990-9-9	13682299090	阿里巴巴与四十大盗
张小三	18	1990-9-9	13682299090	腾讯科技
张三	18	1990-9-9	13682299090	浏阳河就业
张三疯子	18	1990-9-9	13682299090	阿里巴巴
张三	18	1990-9-9	13682299090	阿里巴巴
张大三	18	1990-9-9	13682299090	阿里巴巴
张三五	18	1990-9-9	13682299090	阿里巴巴
张刘三	18	1990-9-9	13682299090	阿里巴巴
张三	18	1990-9-9	13682299090	阿里巴巴

完整网页代码:

<!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>