本文介绍一种纯 css 方案，解决固定表头表格中数据行悬停边框导致的布局跳动、边框被遮挡及左右/顶部边框缺失等问题，无需 javascript 即可实现稳定、完整、视觉一致的 hover 边框效果。
在构建具有固定表头（sticky header）的 HTML 表格时，为
- 尺寸跳动（Layout Shift）：由于 border 增加了元素盒模型的尺寸，而 border-collapse: collapse 下边框又参与共享计算，导致行高突变、内容抖动；
- 边框裁剪与覆盖：position: sticky 的表头会形成新的层叠上下文，导致悬停边框的顶部被表头遮盖；同时，outline 虽无尺寸影响，却无法提供左/右边界，且不支持圆角与精确定位。
✅ 推荐解法：使用绝对定位的“边框容器”替代直接作用于 核心思路是——不修改 以下是完整、可直接运行的优化代码： 立即学习“前端免费学习笔记（深入）”； ? 关键要点说明： ⚠️ 注意事项： 的边框 自身尺寸，而是用一个覆盖其内容区域的绝对定位 作为边框载体。该容器始终占据整行可视区域（扣除滚动条偏移），并通过 z-index 确保位于内容之上、表头之下。
<!DOCTYPE html>
<html>
<head>
<style>
.scroll-container {
width: 600px;
height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
}
table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
th, td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid #eee;
}
th {
background-color: #f8f9fa;
position: sticky;
top: 0;
z-index: 10;
}
/* 关键：为每行添加一个占位 <td>，作为边框容器 */
.bodyRow {
position: relative;
}
.border-box {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 16px); /* 减去左右 padding 总和（12×2）及可能的滚动条宽度余量 */
height: calc(100% - 20px); /* 减去上下 padding 总和（10×2） */
pointer-events: none; /* 确保 hover 事件仍由 tr 捕获 */
z-index: 1;
}
.bodyRow:hover .border-box {
border: 2px solid #007bff;
box-sizing: border-box;
}
/* 可选：提升 hover 视觉反馈（如轻微背景色） */
.bodyRow:hover {
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="scroll-container">
<table>
<thead>
<tr class="headerRow">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr class="bodyRow">
<td class="border-box"></td>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr class="bodyRow">
<td class="border-box"></td>
<td>jkl</td>
<td>mno</td>
<td>pqr</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>
</body>
</html>，置于每行最左侧，position: absolute 使其脱离文档流，避免干扰原有布局；
内首个
中，并设 colspan="3"（适配列数），语义更清晰。
