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

最新推荐文章于 2024-04-25 15:04:32 发布

置顶

weixin_42120621

最新推荐文章于 2024-04-25 15:04:32 发布

阅读量3.5k

点赞数 4

分类专栏：技术文章标签：前端 CSS table 固定表头滚动条

本文链接：https://blog.csdn.net/weixin_42120621/article/details/103628020

版权

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

要使表单滚动的同时表头固定不动，则要求需要将表头和表单分离开来，可以将这两部分分别放在一个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>

最低0.47元/天解锁文章

weixin_42120621

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS控制表头不动，表单内容滚动

在工作中做项目时遇到一个需要固定表头的需求，总结思考如下：要使表单滚动的同时表头固定不动，则要求需要将表头和表单分离开来，可以将这两部分分别放在一个table里面，然后分别控制table的样式。本次不采用这种方法，而是使用table里面自带的thead和tbody属性。首先创立一个表格 <!DOCTYPE html><html><head> &...
复制链接

扫一扫