本文介绍如何通过纯 html 和 css 构建一个表头（thead）固定、表格主体（tbody）可垂直滚动的单列响应式表格，解决 overflow-y 失效与额外边框等常见布局问题。
本文介绍如何通过纯 html 和 css 构建一个表头（thead）固定、表格主体（tbody）可垂直滚动的单列响应式表格，解决 overflow-y 失效与额外边框等常见布局问题。
要实现“表头固定 + tbody 垂直滚动”的效果，关键在于两点：正确设置容器高度约束 和 合理利用 CSS 定位机制。原始代码中 overflow-y: auto 在 .dialog_tbody 上无效，根本原因在于 <tbody> 是表格内部元素，默认不支持直接设置高度和溢出行为；同时将 .dialog_table 设置为 display: block 会破坏 HTML 表格语义结构，导致 border-collapse 失效、边框错位（如右侧多余网格线），并使 thead/tbody 的渲染逻辑异常。
✅ 正确解法是：保持标准 <table> 结构不变，仅对 <thead> 使用 position: sticky; top: 0 实现视觉固定，再为整个 <table> 设置显式高度，并将 overflow-y: auto 应用于 <tbody> 的父容器——但注意：由于 <tbody> 无法直接设高，需将其包裹在具备高度限制的容器中，或更简洁地——直接为 <table> 设定固定高度，并让 <tbody> 继承滚动行为。
然而，更稳定且语义清晰的做法是：保留原生 <table> 显示模式，不修改 display 属性，仅通过 position: sticky 固定表头，并为 <table> 设置明确高度（如 max-height: 300px），配合 overflow: hidden，再确保 <tbody> 内容超出时自然触发滚动。
以下是优化后的完整实现：
立即学习“前端免费学习笔记（深入）”；
<style>
.dialog_table {
border: 1px solid grey;
border-collapse: collapse;
background-color: orange;
width: 100%;
max-height: 300px; /* 关键：限定整体高度 */
overflow: hidden; /* 防止 table 自身溢出 */
}
.dialog_thead {
position: sticky;
top: 0; /* 表头吸附顶部 */
z-index: 10; /* 确保覆盖滚动内容 */
background-color: purple;
color: white;
border: 1px solid grey;
}
.dialog_th,
.dialog_td {
padding: 12px;
font-size: 18px;
text-align: center;
border: 1px solid grey;
white-space: nowrap;
}
.dialog_th {
margin-right: 0;
}
.dialog_tbody {
display: block; /* 允许 tbody 参与块级布局（可选，非必需）*/
max-height: calc(300px - 42px); /* 减去 thead 高度（约2行边框+文字）*/
overflow-y: auto;
overflow-x: hidden;
}
.dialog_tbody .dialog_tr {
display: table-row; /* 恢复行展示 */
width: 100%;
}
.dialog_tbody .dialog_tr:hover {
background-color: green;
}
</style>
<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 3</td></tr>
<tr><td class="dialog_td">DATA 4</td></tr>
<tr><td class="dialog_td">DATA 5</td></tr>
<tr><td class="dialog_td">DATA 6</td></tr>
<tr><td class="dialog_td">DATA 7</td></tr>
<tr><td class="dialog_td">DATA 8</td></tr>
<tr><td class="dialog_td">DATA 9</td></tr>
<tr><td class="dialog_td">DATA 10</td></tr>
<tr><td class="dialog_td">DATA 11</td></tr>
<tr><td class="dialog_td">DATA 12</td></tr>
<tr><td class="dialog_td">DATA 13</td></tr>
<tr><td class="dialog_td">DATA 14</td></tr>
<tr><td class="dialog_td">DATA 15</td></tr>
<tr><td class="dialog_td">DATA 16</td></tr>
</tbody>
</table>? 关键要点说明：
- ✅ position: sticky; top: 0 是核心：它让 <thead> 在滚动时始终吸附于视口顶部，无需 JavaScript，兼容现代浏览器（Chrome 59+, Firefox 56+, Safari 15.4+）。
- ✅ <thead> 必须包裹在 <tr> 中：原代码中 <thead> 直接包含 <td>，不符合 HTML 标准（应为 <tr><th>），已修正为 <tr><th>，提升语义性与渲染稳定性。
- ✅ 高度控制策略：推荐为 <table> 设置 max-height + overflow: hidden，再为 <tbody> 设置 max-height 与 overflow-y: auto，避免 display: block 破坏表格边框合并。
- ⚠️ 注意事项：
- 不要给 <table> 设置 display: block，否则 border-collapse 和单元格对齐将失效；
- sticky 元素的祖先不能有 overflow: hidden 或 transform 等限制条件（本例中 <table> 的 overflow: hidden 不影响其子元素 thead 的 sticky 行为，因 sticky 作用于自身定位上下文）；
- 若需支持旧版浏览器（如 IE），需降级为 JS 方案（监听 scroll 并动态添加 fixed 类）。
该方案轻量、语义正确、无 JS 依赖，适用于对话列表、日志展示、配置项表格等需要固定标题的垂直滚动场景。
