使用 CSS position: sticky 配合容器高度限制，无需 JavaScript 即可实现表头固定、仅 tbody 内容垂直滚动的响应式表格布局。
使用 css `position: sticky` 配合容器高度限制，无需 javascript 即可实现表头固定、仅 tbody 内容垂直滚动的响应式表格布局。
在 Web 开发中，当表格数据量较大时，常需保持表头（）始终可见，同时仅让数据行（
）支持滚动——尤其在页面顶部存在其他内容（如标题、筛选栏）的情况下。现代 CSS 提供了简洁高效的纯样式解决方案，无需依赖 JavaScript 或复杂 DOM 操作。✅ 推荐方案：sticky + 容器约束（推荐）
核心思路是：将 通过 position: sticky 实现表头固定，是当前最轻量、标准且健壮的 CSS 方案。它完美契合“顶部内容固定 + 表头固定 + 数据行滚动”的三层布局需求，彻底摆脱 JS 依赖。只要确保 HTML 结构规范（/ 包裹在具有固定高度和 overflow: auto 的容器中，并为 中的
设置 position: sticky; top: 0。该方案兼容所有现代浏览器（Chrome 56+、Firefox 59+、Safari 13.1+、Edge 16+），语义清晰、性能优异、维护成本低。
? 关键 CSS 规则说明：
? 完整示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>固定表头表格</title>
<style>
.tableFixHead {
overflow-y: auto;
height: 80vh; /* 可根据实际布局调整，如 calc(100vh - 120px) */
margin-top: 1rem;
}
.tableFixHead thead th {
position: sticky;
top: 0;
background: #f5f5f5;
z-index: 1;
border-bottom: 2px solid #ccc;
}
table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
}
th, td {
padding: 10px 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
font-weight: 600;
color: #333;
}
</style>
</head>
<body>
<div>
<h1>EMPLOYEE DATA FOR MAY 2023</h1>
<p>部门统计汇总｜更新时间：2023-05-31</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1550" title="Brancher AI"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a0caa062f448.png" alt="Brancher AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1550" title="Brancher AI">Brancher AI</a>
<p>无代码连接AI模型，快速创建AI应用程序</p>
</div>
<a href="/ai/1550" title="Brancher AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>SR.NO</th>
<th>EMPLOYEE</th>
<th>DEPARTMENT</th>
<th>SALARY (¥)</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Hritik</td><td>Engineering</td><td>18,500</td></tr>
<tr><td>2</td><td>Jay</td><td>Marketing</td><td>12,200</td></tr>
<!-- 更多数据行... -->
<tr><td>50</td><td>Zoe</td><td>HR</td><td>14,800</td></tr>
</tbody>
</table>
</div>
</body>
</html>⚠️ 注意事项与最佳实践
直接设 height 和 overflow：这会导致整个表格（含表头）被裁剪。务必用外层
（如分组标题），需为每个
单独设置 sticky，并确保 top 值区分层级（例如第一行 top: 0，第二行 top: 40px），但更推荐语义化结构（如
正确使用 scope 属性（如 scope="col"）以增强可访问性。
上叠加复杂阴影或渐变背景，以防重绘开销。
明确分离）、CSS 作用域精准（sticky 应用于 th 而非 tr 或 thead），即可快速交付专业级表格体验。
✅ 总结
