本文介绍一种纯 css 方案，解决固定表头表格中数据行悬停边框导致的布局跳动、边框被遮挡及左右/顶部边框缺失等问题，无需 javascript 即可实现稳定、完整、视觉一致的 hover 边框效果。
在构建具有固定表头（sticky header）的 HTML 表格时，为
- 尺寸跳动（Layout Shift）：由于 border 增加了元素盒模型的尺寸，而 border-collapse: collapse 下边框又参与共享计算，导致行高突变、内容抖动；
- 边框裁剪与覆盖：position: sticky 的表头会形成新的层叠上下文，导致悬停边框的顶部被表头遮盖；同时，outline 虽无尺寸影响，却无法提供左/右边界，且不支持圆角与精确定位。
✅ 推荐解法：使用绝对定位的“边框容器”替代直接作用于 核心思路是——不修改 以下是完整、可直接运行的优化代码： 立即学习“前端免费学习笔记（深入）”； ? 关键要点说明： ⚠️ 注意事项： 的边框 自身尺寸，而是用一个覆盖其内容区域的绝对定位 作为边框载体。该容器始终占据整行可视区域（扣除滚动条偏移），并通过 z-index 确保位于内容之上、表头之下。
Column 1
Column 2
Column 3
abc
def
ghi
jkl
mno
pqr
，置于每行最左侧，position: absolute 使其脱离文档流，避免干扰原有布局；
内首个
中，并设 colspan="3"（适配列数），语义更清晰。
