如何固定html表格头部，用css样式即可实现，操作简便、代码简单

Z_B_L

已于 2023-10-12 09:06:04 修改

阅读量953

点赞数 1

文章标签： html css 前端

于 2023-10-12 09:01:31 首次发布

本文链接：https://blog.csdn.net/Z_B_L/article/details/133782443

版权

首先创建一个表格

表头：

<div class="table_box">
	<table cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th><input type="checkbox" class="thItem" onclick="fn(this)"></th>
				<th>姓名</th>
				<th>岗位工资</th>
				<th>岗位级别</th>
				<th>性别</th>
				<th>生日</th>
				<th>手机号</th>
				<th>身份证号</th>
				<th>项目名称</th>
				<th>公司名称</th>
				<th>政治面貌</th>
				<th>籍贯</th>
				<th>学历</th>
				<th>创建时间</th>
				<th>员工状态</th>
				<th>用工形式</th>
				<th>现合同到期时间</th>
				<th>现合同期限</th>
				<th>银行卡卡号</th>
				<th>工资卡开户行</th>
				<th>操作</th>
			</tr>
		</thead>
						
		<tbody id="tb">
					
		</tbody> 
    </table>
</div>

tbody部分直接使用js，意思是使用循环在表格的主体部分加入了表格标签，不用大量的去复制空格子（其实就是up比较懒 (o▽｀o) ）

        <script>
			let inp = document.getElementById("tb")
			let str = ""
			for(let i = 0 ; i < 20 ; i++){
				str += `<tr>
					<td><input type="checkbox" class="thItem""></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>`
				
			}
			inp.innerHTML = str
			
		</script>

添加基本的css样式：

        <style>
			.table_box{
				width: 1632px;
				overflow: scroll;
			}
			table{
				width: 3000px;
			}
			td,th{
				border: 1px solid #777;
				width: 200px;
			}
			td{
				height: 30px;
				text-align: center;
			}
		</style>

效果：

下面添加css样式，给需要固定的地方加粘性定位sticky

使用伪类选择器进行选定元素：

        /* 第一列 */
			thead>tr>th:first-child{
				position: sticky;
				left: 0;
				background-color: rgb(240, 240, 240);
			}
			tbody>tr>td:first-child{
				position: sticky;
				left: 0;
				background-color: rgb(240, 240, 240);
			}
	    /* 第二列 */
			thead>tr>th:nth-child(2){
				position: sticky;
				left: 144px;
				background-color: rgb(240, 240, 240);
			}
			tbody>tr>td:nth-child(2){
				position: sticky;
				left: 144px;
				background-color: rgb(240, 240, 240);
			}
		/* 最后一列 */
			thead>tr>th:last-child{
				position: sticky;
				right: 0;
				background-color: rgb(240, 240, 240);
			}
			tbody>tr>td:last-child{
				position: sticky;
				right: 0;
				background-color: rgb(240, 240, 240);
			}

效果：

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.table_box{
				width: 1632px;
				overflow: scroll;
			}
			table{
				width: 3000px;
			}
			td,th{
				border: 1px solid #777;
				width: 200px;
			}
			td{
				height: 30px;
				text-align: center;
			}
			/* 第一列 */
			thead>tr>th:first-child{
				position: sticky;
				left: 0;
				background-color: rgb(240, 240, 240);
			}
			tbody>tr>td:first-child{
				position: sticky;
				left: 0;
				background-color: rgb(240, 240, 240);
			}
			/* 第二列 */
			thead>tr>th:nth-child(2){
				position: sticky;
				left: 144px;
				background-color: rgb(240, 240, 240);
			}
			tbody>tr>td:nth-child(2){
				position: sticky;
				left: 144px;
				background-color: rgb(240, 240, 240);
			}
			/* 最后一列 */
			thead>tr>th:last-child{
				position: sticky;
				right: 0;
				background-color: rgb(240, 240, 240);
			}
			tbody>tr>td:last-child{
				position: sticky;
				right: 0;
				background-color: rgb(240, 240, 240);
			}
		</style>
	</head>
	<body>
		<div class="table_box">
			<table cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th><input type="checkbox" class="thItem" onclick="fn(this)"></th>
						<th>姓名</th>
						<th>岗位工资</th>
						<th>岗位级别</th>
						<th>性别</th>
						<th>生日</th>
						<th>手机号</th>
						<th>身份证号</th>
						<th>项目名称</th>
						<th>公司名称</th>
						<th>政治面貌</th>
						<th>籍贯</th>
						<th>学历</th>
						<th>创建时间</th>
						<th>员工状态</th>
						<th>用工形式</th>
						<th>现合同到期时间</th>
						<th>现合同期限</th>
						<th>银行卡卡号</th>
						<th>工资卡开户行</th>
						<th>操作</th>
					</tr>
				</thead>
						
				<tbody id="tb">
					
				</tbody>
			</table>
		</div>
		<script>
			let inp = document.getElementById("tb")
			let str = ""
			for(let i = 0 ; i < 20 ; i++){
				str += `<tr>
					<td><input type="checkbox" class="thItem""></td>
					<td>张三</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>备注</td>
				</tr>`
				
			}
			inp.innerHTML = str
			
		</script>
	</body>
</html>

此文所实现的效果为纯css，适合新手，操作简单，如果使用js实现此效果的话会更加美观、简便，以后有机会还会一同分享有关js的实现方法 (▽｀)

谢谢观看(/≧▽≦)/