本文介绍如何通过纯 HTML/CSS 实现仅 tbody 区域垂直滚动、表头（thead）固定不动的响应式表格，解决滚动失效与边框错位问题，无需 JavaScript。
本文介绍如何通过纯 html/css 实现仅 `tbody` 区域垂直滚动、表头（`thead`）固定不动的响应式表格，解决滚动失效与边框错位问题，无需 javascript。
要实现一个仅 tbody 可垂直滚动、而 thead 始终固定在顶部的纯 CSS 表格，关键在于两点：限制 tbody 的高度并启用滚动，以及让表头具备粘性定位能力。原代码中存在多个结构性和样式性问题，导致 overflow-y: auto 失效（因 tbody 默认为表格元素，无法直接设置 overflow），且错误地将 display: block 应用于 <table>，破坏了表格渲染模型，进而引发右侧额外边框、列宽塌陷等异常。
✅ 正确实现方案
核心思路是：
- 保留标准 <table> 的 display 行为（不要设 display: block），确保单元格对齐与边框合并正常；
- 为 thead 添加 position: sticky; top: 0，使其在滚动时吸附于容器顶部；
- 将 tbody 包裹在带固定高度和 overflow-y: auto 的容器中（注意：不能直接对 tbody 设置 overflow，因其不接受该属性；需借助外层容器或调整结构）；
- 但更简洁可靠的方案是：不对 tbody 单独设 overflow，而是给整个 <table> 设定固定高度，并利用 thead 的 sticky 特性 + tbody 自动撑开 + 父容器控制滚动。
然而，由于 <tbody> 本身不支持 overflow，推荐采用以下语义正确、兼容性好（Chrome/Firefox/Safari ≥ iOS 14.5）的结构优化法：
✅ 推荐 HTML 结构（保持语义化）
<div class="scrollable-table-container">
<table class="dialog_table">
<thead class="dialog_thead">
<tr>
<th class="dialog_th">COLUMN 1</th>
</tr>
</thead>
<tbody class="dialog_tbody">
<tr><td class="dialog_td">DATA 1</td></tr>
<tr><td class="dialog_td">DATA 2</td></tr>
<!-- ... 其余数据行 -->
<tr><td class="dialog_td">DATA 16</td></tr>
</tbody>
</table>
</div>✅ 对应 CSS（修复关键问题）
/* 容器控制滚动区域高度 */
.scrollable-table-container {
max-height: 300px; /* 设定可见区域高度 */
overflow-y: auto;
border: 1px solid grey;
}
.dialog_table {
width: 100%;
border-collapse: collapse;
margin: 0;
background-color: orange;
}
.dialog_thead th {
position: sticky;
top: 0;
background-color: purple;
color: white;
padding: 12px;
text-align: center;
border: 1px solid grey;
z-index: 10; /* 确保表头不被 tbody 内容遮挡 */
}
.dialog_tbody td {
padding: 12px;
font-size: 18px;
text-align: center;
border: 1px solid grey;
white-space: nowrap;
}
.dialog_tbody tr:hover {
background-color: green;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- position: sticky 必须配合 top（或 bottom）值才生效，且其父容器不能有 overflow: hidden/clip（否则会截断粘性效果）；
- 原代码中 <thead> 内直接写 <td> 是HTML 无效结构，必须用 <tr><th> 或 <tr><td> 包裹，否则解析行为不可控；
- .dialog_tbody 类不应重复应用于 <tr>（如 <tr class="dialog_tbody">），这会造成样式混淆，应仅作用于 <tbody> 元素本身；
- width: 1px 在 <td> 上易导致列宽计算异常，建议移除或改用 min-width 控制；
- 若需 IE 兼容，sticky 不被支持，需回退至 JS 方案（如监听 scroll 并动态添加 fixed class）。
✅ 效果验证
此方案可确保：
- 表头始终固定于可视区域顶部；
- 数据行超出容器高度时自动出现垂直滚动条；
- 所有边框对齐、无多余空白或错位；
- hover 交互（如背景变色）在滚动中仍准确响应。
总结：构建可滚动表格的核心不是强行给 tbody 加 overflow，而是通过语义正确的结构 + sticky 表头 + 外层容器高度约束，以最小侵入、最高兼容的方式达成目标。
