自定义固定table表头

原创

已于 2022-10-11 15:31:06 修改 · 545 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-10-11 15:29:52 首次发布

本文介绍了如何使用CSS来实现自定义固定table表头的效果。内容分为三个部分：1. CSS部分，主要讲解如何设置样式以固定表头；2. HTML部分，展示如何构建表格结构；3. JS部分，讨论可能需要的JavaScript辅助实现，如滚动同步等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.css部分

table {
				border-collapse: collapse;
				border-spacing: 0
			}

			h1 {
				font-size: 20px;
				color: #fff;
				text-transform: uppercase;
				font-weight: 300;
				text-align: center;
				margin-bottom: 15px;
			}

			table {
				width: 700px;
				table-layout: fixed;
				WORD-BREAK: break-all;
			}

			.tbl-header {

				overflow: hidden;
				left: 0;
				right: 0;
			}

			.tbl-content {
				height: 650px;
				overflow-x: auto;
				margin-top: 0px;
			}

			th {
				width: 120px;
				padding: 20px 15px;
				text-align: left;
				font-weight: 500;
				font-size: 12px;
				text-transform: uppercase;
			}

			td {
				width: 120px;
				padding: 15px;
				text-align: left;
				vertical-align: middle;
				font-weight: 300;
				font-size: 12px;
				border-bottom: solid 1px rgba(255, 255, 255, 0.1);
			}

2.html部分

<div class="tbl-header">
				<table cellpadding="0" cellspacing="0" border="0">
					<thead>

最低0.47元/天解锁文章

200万优质内容无限畅学