CSS控制表头不动,表单内容滚动

技术 专栏收录该内容
4 篇文章 0 订阅

在工作中做项目时遇到一个需要固定表头的需求,总结思考如下:

要使表单滚动的同时表头固定不动,则要求需要将表头和表单分离开来,可以将这两部分分别放在一个table里面,然后分别控制table的样式。本次不采用这种方法,而是使用table里面自带的thead和tbody属性。

  1. 首先创立一个表格
    <!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>

  2. 表格样式太丑了,对其进行简单的初始化。

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>

最后效果图:

  • 后续优化想法:设置滚动条为隐藏状态,鼠标移入后显示出现。表头和表单内容对齐。
  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值