本文介绍通过 css 伪元素（::after）在 sticky 单元格底部添加遮罩层，阻止绿色弹出框在水平滚动时从白色边框下方溢出，纯 css 实现，无需 javascript。
本文介绍通过 css 伪元素（::after）在 sticky 单元格底部添加遮罩层，阻止绿色弹出框在水平滚动时从白色边框下方溢出，纯 css 实现，无需 javascript。
在使用 position: sticky 实现表格列冻结（如首几列为固定列）并配合水平滚动（overflow-x: auto）的场景中，一个常见视觉缺陷是：当右侧非 sticky 单元格内包含绝对定位的悬浮内容（如 .popover）时，该内容可能在滚动过程中“穿透”到左侧 sticky 单元格的底部边界之外，导致绿色背景从本应为纯白的 border-bottom 区域显露出来——破坏了设计要求的“白色边框完整性”。
根本原因在于：sticky 元素的 z-index 虽高于普通单元格，但其渲染边界受限于自身盒模型；而绝对定位的 popover 若未被严格约束在父容器内，且父容器（.popover-container）未设置 overflow: hidden 或遮罩层，其渲染层可能在滚动时与 sticky 元素底部产生视觉重叠间隙。
✅ 解决方案：为每个 .sticky 元素添加 ::after 伪元素，作为底层遮罩：
.sticky::after {
content: "";
position: absolute;
bottom: -4px; /* 精确覆盖 border-bottom 下方 1px + popover 上移余量 */
left: 0;
width: 100%;
height: 4px; /* 足够覆盖 border 和潜在溢出像素 */
background-color: white; /* 与 border 颜色一致，实现视觉无缝衔接 */
z-index: 1; /* 确保位于 popover（z-index: 1）之下，但盖住其溢出部分 */
}
⚠️ 关键细节说明：
-
bottom: -4px向下偏移，使伪元素延伸至border-bottom外侧，形成物理遮挡； -
height: 4px是经验性安全值（兼容 1px 边框 + 抗锯齿/亚像素渲染偏差），可根据实际边框宽度微调； -
background-color: white必须与tr { border-bottom: 1px solid white }严格一致，避免色差； - 不可对
.popover-container直接设overflow: hidden，否则会裁剪 popover 自身（因其left: -12px需外伸）； - 此方法完全基于 CSS，无 JS 依赖，符合性能与维护性要求。
? 扩展建议：若表格存在多行表头或复杂嵌套，可将 .sticky::after 规则统一应用于 th.sticky, td.sticky，并确保所有 sticky 列的 left 偏移值计算准确（如示例中 55.86px 来自列宽 + padding + border），以维持遮罩横向连续性。
最终效果：无论用户如何水平滚动，绿色 popover 始终被白色遮罩层“截断”在 sticky 列边界内，表格整体保持干净、专业的白色分隔边框，满足 UI 规范与用户体验双重目标。
