本文介绍如何在前端项目中实现CSS控制的固定表头，内容可滚动的效果。通过分离表头和表单，利用thead和tbody属性，解决边框间隙、边框叠加和滚动条样式问题，最终实现理想的布局效果。
在工作中做项目时遇到一个需要固定表头的需求，总结思考如下：
要使表单滚动的同时表头固定不动，则要求需要将表头和表单分离开来，可以将这两部分分别放在一个table里面，然后分别控制table的样式。本次不采用这种方法，而是使用table里面自带的thead和tbody属性。
- 首先创立一个表格
<!DOCTYPE html> <html> <head> <title>固定表头不动，表格滑动</title> <style> th{ border: 1px solid #ccc; } td{ border: 1px solid #ccc; } </style> </head> <body> <div class="table-container"> <table class="table"> <thead class="thead"> <tr> <th>姓名</th> <th>年龄</th> <th>出生年月</th> <th>手机号码</th> <th>单位</th> </tr> </thead> <tbody class="tbody"> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> <tr> <td>张三</td> <td>19</td> <td>1997/1/1</td> <td>187XXXXXXXX</td> <td>中移在线</td> </tr> </tbody> </table> </div> </body> </html>
-
表格样式太丑了，对其进行简单的初始化。
th{
border: 1px solid #000;
border-collapse: collapse;
}
td{
border: 1px solid #000;
border-collapse: collapse;
}
.table{
width: 800px;
background-color: lightblue;
border-spacing: 0;
}接下来为表格添加主体样式：
<style type="text/css">
.table-container{
width: 800px;
height: 800px;
background-color: #ccc;
}
.table{
width: 100%;
background-color: lightblue;
border-spacing: 0;
}
.thead{
display: block;
width: 100%;
}
.tbody{
height :200px;
width: 100%;
display: block;
overflow: auto;
}
th{
width: 200px;
border: 1px solid #000;
border-collapse: collapse;
}
td{
width: 200px;
border: 1px solid #000;
border-collapse: collapse;
}
</style>最后整体效果如图：
过程中遇到的问题及解决方法：
- 给table增加边框后，每一个td之间存在间隙，查询资料后发现这是table的初始化样式，需要通过border-spacing: 0;来进行消除。
- 把间隙消除后，我发现td的边框明显不是1px，原因为边框相互叠加了，解决办法为为th和td添加一个border-collapse: collapse;的属性，使上下左右重复的边框可以相互叠加。
-
给tbody增加滚动条后发现该滚动条未生效，给tbody增加position:fixed;属性后滚动条样式生效，但是整体样式错乱，如下图显示。最后解决方法为将thead和tbody均转化为块状元素，表单可正常展示。（需要注意的是如果只把thead转化为块状元素，表头显示不正常，表单显示正常，且滚动条不生效。如果只把tbody转化为块状元素，表头显示正常，表单显示不正常，且会生成横向和纵向两个滚动条，暂不清楚什么原因导致的此种问题，有知道的小伙伴可以在我的博客下面留言，感谢！）
完整代码如下，仅作参考，欢迎批评指正！
<!DOCTYPE html>
<html>
<head>
<title>固定表头不动，表格滑动</title>
<style type="text/css">
.table-container{
width: 800px;
height: 800px;
background-color: #ccc;
float: left;
margin-left: 40px;
overflow: hidden; //滚动条隐藏
}
.table{
width: 800px;
background-color: lightblue;
border-spacing: 0;
}
.thead{
display: block;
width: 782px;
}
.tbody{
height :200px;
width: 800px;
display: block;
overflow-x: hidden;
overflow-y: auto;
}
th{
width: 200px;
border: 1px solid #000;
border-collapse: collapse;
}
td{
width: 200px;
border: 1px solid #000;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="table-container">
<table class="table">
<thead class="thead">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>出生年月</th>
<th>手机号码</th>
<th>单位</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1997/1/1</td>
<td>187XXXXXXXX</td>
<td>中移在线</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>最后效果图：
- 后续优化想法：设置滚动条为隐藏状态，鼠标移入后显示出现。表头和表单内容对齐。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
