本文介绍如何通过纯 HTML/CSS 构建一个表头（thead）始终可见、tbody 内容区域支持垂直滚动的单列表格，解决 overflow-y 失效及边框错位问题。
本文介绍如何通过纯 html/css 构建一个表头（thead）始终可见、tbody 内容区域支持垂直滚动的单列表格，解决 `overflow-y` 失效及边框错位问题。
要实现「表头固定 + tbody 垂直滚动」效果，关键在于不破坏 HTML 表格语义结构的前提下，正确应用 CSS 定位与溢出控制。原始代码中将 .dialog_table 设为 display: block 是根本性错误——这会剥离
的原生渲染逻辑，导致 border-collapse 失效、单元格对齐异常，并使 tbody 的 overflow-y 无法生效（因 block 元素无法约束内部 table 子元素的高度行为）。✅ 正确做法是：
- 保留
默认 display: table，仅对 应用 position: sticky; top: 0 实现粘性表头； - 为 设置明确高度上限 + overflow-y: auto（注意：height: auto 无效，必须指定具体高度或 max-height）；
- 确保 和
共享相同列宽约束，避免出现右侧多余边框（即“额外网格”问题，本质是列宽未对齐导致的视觉错位）。
以下是优化后的完整方案：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
<style>
.dialog_table {
border: 1px solid grey;
border-collapse: collapse;
background-color: orange;
width: 100%;
/* 不设 height，由内容决定整体高度 */
}
.dialog_thead {
position: sticky;
top: 0;
z-index: 10; /* 确保表头在滚动时盖住下方内容 */
background-color: purple;
color: white;
border: 1px solid grey;
}
.dialog_tbody {
border: 1px solid grey;
max-height: 200px; /* ✅ 关键：必须设置明确高度限制才能触发 overflow */
overflow-y: auto;
}
.dialog_th,
.dialog_td {
padding: 12px;
font-size: 18px;
text-align: center;
border: 1px solid grey;
white-space: nowrap;
}
/* 强制单列宽度一致，消除右侧多余边框 */
.dialog_th,
.dialog_td {
width: 100%;
box-sizing: border-box;
}
.dialog_tbody .dialog_tr:hover {
background-color: green;
}
</style>
| COLUMN 1 |
| DATA 1 |
| DATA 2 |
| DATA 3 |
| DATA 4 |
| DATA 5 |
| DATA 6 |
| DATA 7 |
| DATA 8 |
| DATA 9 |
| DATA 10 |
| DATA 11 |
| DATA 12 |
| DATA 13 |
| DATA 14 |
| DATA 15 |
| DATA 16 |
⚠️ 注意事项：
- 必须包裹在
中：原始代码中 直接包含 | ，不符合 HTML 规范（应为 |
在 |
内），已修正为标准结构； -
max-height 而非 height 更健壮：避免内容不足时出现空白滚动条；
-
z-index 防止滚动时表头被遮挡：尤其在深色背景或复杂布局中必不可少；
-
box-sizing: border-box + width: 100% 统一列宽：彻底解决右侧多余边框问题；
-
兼容性提示：position: sticky 在现代浏览器（Chrome 56+, Firefox 59+, Safari 6.1+）中支持良好，IE 不支持，如需兼容 IE，需改用 JavaScript 方案（如监听 scroll 事件动态定位）。
该方案兼顾语义化、可访问性与性能，无需 JavaScript 即可实现专业级滚动表格体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
