在 `border-collapse: collapse` 模式下，css 表格边框会按算法合并，导致深色边框被邻近浅色边框部分遮盖；本文提供两种可靠方案——使用绝对定位的 `::after` 伪元素配合 `border` 或 `box-shadow`，绕过原生边框渲染机制，实现可控的边框层级。
当使用 border-collapse: collapse 时，浏览器会依据「边框冲突解决规则」（如宽度优先、样式优先、颜色优先）自动合并相邻单元格边框。这虽提升性能与一致性，却使开发者无法直接控制某单元格边框的“绘制优先级”——即使设置更大的 border-width 或 z-index（对 table cell 无效），也无法保证其视觉上完全凸显。
根本原因：z-index 对非定位元素无效，而 <td> 默认为 static 定位；同时 border-collapse 会将边框视为共享几何结构，而非独立图层。
✅ 推荐解决方案：用 ::after 伪元素模拟边框
通过为特定单元格（如 .dark）创建新的定位上下文，并在其上层叠加一个绝对定位的伪元素，即可完全绕过原生边框渲染逻辑，实现真正可预测、可覆盖的边框效果。
✅ 方案一：::after + border（精确尺寸控制）
td.dark.s1 {
position: relative; /* 创建新 stacking context */
}
td.dark.s1::after {
content: '';
position: absolute;
inset: -8px; /* 向外扩展 8px，覆盖原有边框区域 */
border: 8px solid black;
pointer-events: none; /* 确保不影响文本选择与交互 */
}✅ 优势：边框样式（solid/dashed/rounded）完全可控； ⚠️ 注意：需确保 inset 值 = 边框宽度，否则会出现偏移或留白。
✅ 方案二：::after + box-shadow（更轻量、抗缩放）
td.dark.s2 {
position: relative;
}
td.dark.s2::after {
content: '';
position: absolute;
inset: 0; /* 贴合单元格内容盒 */
box-shadow: 0 0 0 8px black;
pointer-events: none;
}✅ 优势：无需计算偏移，响应式友好；支持 box-shadow 的所有特性（如多重阴影、模糊）；
⚠️ 注意：box-shadow 仅支持实线边框，且圆角需额外通过 border-radius 配合实现。
? 必要补充说明
- 即便使用伪元素，.dark 仍需声明 border（如 border: 8px solid black），否则 border-collapse 可能破坏表格结构（如出现间隙或错位）；其颜色可任意，因会被伪元素完全覆盖。
- 添加 pointer-events: none 至 ::after 是关键——它允许用户正常选中文本、触发点击事件，避免伪元素成为交互屏障。
- 若需兼容旧版浏览器（如 IE），应避免 inset（可用 top/right/bottom/left 替代），并验证 box-shadow 支持度。
? 总结
原生表格边框的“覆盖不可控”是 CSS 规范设计使然，而非 bug。与其尝试 hack z-index 或 border-style 优先级，不如主动放弃依赖 border 属性本身，转而用现代 CSS（伪元素 + 定位 + 绘制属性）构建更稳定、更灵活的视觉边界。该模式也适用于高亮表头、悬停强调、动态状态边框等进阶场景。
