本文介绍一种纯 css 方案，解决固定表头表格（`position: sticky`）中悬停行添加完整四边边框时出现的布局跳动、边框被遮挡、左右/顶部边框缺失等常见问题。
在构建具有固定表头的 HTML 表格时，常需为数据行添加悬停高亮效果。若直接对 <tr> 应用 border: 1px solid blue，会因边框增加导致行高突变，引发视觉“跳动”；而改用 outline 虽可避免尺寸变化，却无法渲染左右及顶部边框（尤其首行顶部 outline 易被 sticky 表头遮盖），且 outline 不支持圆角与独立方向控制，实用性受限。
一个简洁可靠的纯 CSS 解决方案是：不直接给 <tr> 加边框，而是为每行内部创建一个绝对定位的“边框容器”，通过包裹单元格内容并精确控制其尺寸与层级，实现无跳动、全包围、不遮挡的悬停边框效果。
具体实现如下：
<div class="table-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">
<div class="cell-wrapper">
<span>abc</span>
<span>def</span>
<span>ghi</span>
</div>
</td>
</tr>
<tr class="bodyRow">
<td class="border-box">
<div class="cell-wrapper">
<span>xyz</span>
<span>uvw</span>
<span>rst</span>
</div>
</td>
</tr>
<!-- 更多行... -->
</tbody>
</table>
</div>对应关键 CSS：
Knowledge Graph - Csv Graph Loader Generator
下载
从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。
立即学习“前端免费学习笔记（深入）”；
.table-container {
width: 600px;
height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
}
table {
width: 100%;
border-collapse: collapse;
}
.headerRow th {
position: sticky;
top: 0;
background-color: #fff;
padding: 10px 12px;
font-weight: bold;
text-align: left;
z-index: 10;
}
/* 边框容器：单个 td 占满整行，绝对定位 */
.border-box {
position: relative;
padding: 0;
}
.border-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none; /* 确保 hover 仍作用于 tr */
transition: border 0.2s ease;
}
.bodyRow:hover .border-box::before {
border: 2px solid #1e90ff;
border-radius: 4px;
}
/* 内容居中对齐（可选） */
.cell-wrapper {
display: table;
width: 100%;
height: 100%;
}
.cell-wrapper > span {
display: table-cell;
vertical-align: middle;
padding: 10px 12px;
white-space: nowrap;
}✅ 该方案优势显著：
- ✅ 零跳动：边框绘制在伪元素上，不改变文档流与行高；
- ✅ 全包围可见：::before 绝对覆盖整行区域，上下左右边框均清晰呈现，不受 sticky 表头遮挡；
- ✅ 层级可控：通过 z-index 或 position: relative 配合，确保边框始终位于内容之上、表头之下；
- ✅ 完全无 JS：100% 基于 CSS 实现，轻量、可维护、兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2020）；
- ✅ 可扩展性强：支持圆角、阴影、渐变边框，甚至 hover 动画。
⚠️ 注意事项：
- 避免在 .border-box 上设置 padding 或 border，否则会影响伪元素定位精度；
- 若表格列宽由内容撑开，建议为 th/td 设置 min-width 或使用 table-layout: fixed 保证列宽稳定；
- 在 Safari 中，position: sticky 对 thead > tr 的兼容性更佳，推荐将 sticky 应用于 <th> 而非 <tr>（如本例所示）；
- 如需支持 IE，此方案不可用（IE 不支持 position: sticky 和 ::before 在 <td> 中的绝对定位），应降级为 JS 滚动监听方案。
综上，通过伪元素 + 绝对定位的“边框层”思路，我们优雅绕开了传统 border/outline 的固有缺陷，在保持语义化 HTML 结构的同时，实现了专业级的交互反馈体验。
