本文介绍一种纯 css 方案，解决 html 表格中固定表头（`position: sticky`）与数据行悬停边框共存时出现的布局跳动、边框遮挡和缺失等问题，无需 javascript 即可实现完整环绕、无重绘抖动的 hover 边框效果。
在构建具有固定表头的长表格时，常见的需求是：表头始终可见（通常用 position: sticky 实现），同时数据行在鼠标悬停时显示清晰的视觉反馈（如完整边框）。但直接对
- 布局跳动（Jitter）：border 增加了元素尺寸，触发重排（reflow），使行高突变；
- 边框裁剪与遮挡：由于 sticky 表头位于独立层叠上下文，tr:hover { border: 1px solid } 的顶部边框会被表头覆盖；左右边框也可能因 overflow: scroll 容器或单元格盒模型限制而显示不全。
使用 outline 虽可避免跳动（因其不参与盒模型计算），但 outline 不支持单侧控制、无法圆角、且默认不包围整个行区域（尤其在 table-layout: auto 下表现不可靠），更关键的是——它无法在 tr 上可靠地渲染为完整矩形边框。
✅ 推荐解决方案：“伪边框容器”法（CSS-only）
该方法绕过对
以下是完整、可直接运行的代码示例：
Column 1 Column 2 Column 3 abc def ghi jkl mno pqr
? 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- .border-box 是一个空
，位于每行最左侧（也可用 ::before 伪元素替代，但需兼容性权衡）； - position: absolute 使其脱离文档流，尺寸通过 calc() 精确控制，避开 padding 和 border 干扰；
- pointer-events: none 保证鼠标悬停仍作用于
，而非被该层拦截； - z-index: 1 确保边框显示在内容之上，但低于 sticky 表头（表头 z-index: 10）——这样既不遮挡边框，也不被边框遮挡；
- table-layout: fixed 配合 width 设置，防止列宽随内容波动，增强滚动稳定性。
⚠️ 注意事项：
- 若表格列数动态变化，请确保 .border-box 始终为第一列，或改用 ::before 伪元素 + tr { position: relative } 实现（需注意 tr::before 在部分旧浏览器中支持有限）；
- 如需支持 IE，建议降级为 outline + transparent border 预留方案（虽无完整边框，但可保持布局稳定）；
- 滚动容器请务必设置 overflow-y: auto（非 scroll），避免始终显示空白滚动条影响视觉。
此方案已在 Chrome、Firefox、Edge（Chromium）、Safari 最新版中验证稳定，真正实现了「固定表头 + 全向悬停边框 + 零跳动 + 纯 CSS」三大目标。
