本文介绍一种纯
css
方案，解决固定表头表格中数据行悬停边框导致的布局跳动、边框被遮挡及左右/顶部边框缺失等问题，无需
java
script 即可实现稳定、完整、视觉一致的 hover 边框效果。
在构建具有固定表头（sticky header）的 HTML 表格时，为 元素直接设置 border 并在 :hover 时切换，会引发两个典型问题：
尺寸跳动（Layout Shift）
：由于 border 增加了元素盒模型的尺寸，而 border-collapse: collapse 下边框又参与共享计算，导致行高突变、内容抖动；
边框裁剪与覆盖
：position: sticky 的表头会形成新的层叠上下文，导致悬停边框的顶部被表头遮盖；同时，outline 虽无尺寸影响，却无法提供左/右边界，且不支持圆角与精确定位。
✅ 推荐解法：
使用绝对定位的“边框容器”替代直接作用于 的边框
核心思路是——
不修改 自身尺寸，而是用一个覆盖其内容区域的绝对定位 作为边框载体
。该容器始终占据整行可视区域（扣除滚动条偏移），并通过 z-index 确保位于内容之上、表头之下。
以下是完整、可直接运行的优化代码：
立即学习
“
前端免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
?
关键要点说明
：
.border-box 是一个空 ，置于每行最左侧，position: absolute 使其脱离文档流，避免干扰原有布局；
width 和 height 使用 calc() 动态减去内边距（padding），确保边框精准贴合单元格内容区，而非撑满整行（否则会溢出或覆盖相邻列）；
pointer-events: none 保证鼠标悬停仍能正确触发 .bodyRow:hover，不中断交互逻辑；
z-index: 1 确保边框显示在单元格内容之上，但低于 z-index: 10 的表头，从而避免顶部被遮挡；
若表格列数固定，也可将 .border-box 放入 内首个 中，并设 colspan="3"（适配列数），语义更清晰。
⚠️
注意事项
：
此方案依赖 position: relative 在 上生效（现代
浏览器
均支持）；
若启用 table-layout: fixed，请确保列宽定义明确，避免 .border-box 宽度计算偏差；
如需支持 IE，需替换为 transform: translateZ(0) 触发
硬件加速
+ z-index 配合，但 IE 不支持 position: sticky，故本方案默认面向现代浏览器（Chrome/Firefox/Safari/Edge ≥ 79）。
通过该方法，你将获得一个
零跳动、全包围、层级正确、无 JS 依赖
的固定表头表格悬停效果，兼顾性能、可维护性与用户体验。
Column 1
Column 2
Column 3
abc
def
ghi
jkl
mno
pqr