在 `border-collapse: collapse` 模式下，css 表格边框会按算法合并，导致高权重边框（如粗黑边）仍可能被邻近边框“裁剪”或覆盖；本文提供两种基于伪元素的可靠解决方案：使用 `::after` 配合 `position: absolute` + `border` 或 `box-shadow`，绕过原生边框渲染机制。
当使用 border-collapse: collapse 时，浏览器会依据 CSS 边框冲突解决规则（如宽度优先、样式优先、颜色优先）自动合并相邻单元格边框——但这一机制不可控且不支持 z-index，因此即使给某个 <td> 设置了更粗、更醒目的边框（如 8px solid black），它仍可能被邻接单元格的浅色边框部分遮盖，视觉效果不稳定。
根本解法是脱离原生边框渲染流程：利用 ::before 或 ::after 伪元素，在目标单元格内层创建一个独立的、可精确定位的装饰层。由于伪元素默认处于内容层之上（且可通过 position: relative 在单元格内建立新层叠上下文），其绘制完全不受 border-collapse 影响。
以下是两种经过验证的实现方式：
✅ 方案一：::after + 绝对定位 border
通过 inset: -8px 将伪元素向外扩展 8px，再施加同等尺寸的黑色边框，完美模拟“外扩式粗边框”：
td.dark.s1 {
position: relative; /* 创建层叠上下文，确保 ::after 相对于本单元格定位 */
}
td.dark.s1::after {
content: '';
position: absolute;
inset: -8px; /* 等效于 top/right/bottom/left: -8px */
border: 8px solid black;
z-index: 1; /* 可选：显式提升层级（尽管通常非必需） */
}✅ 方案二：::after + box-shadow（更轻量）
用零偏移 inset: 0 配合 box-shadow 的外扩边框效果，代码更简洁，且无额外盒模型干扰：
td.dark.s2 {
position: relative;
}
td.dark.s2::after {
content: '';
position: absolute;
inset: 0;
box-shadow: 0 0 0 8px black; /* 第4个参数为扩展半径，等效于外边框 */
}⚠️ 注意事项： 即使采用伪元素方案，.dark 类仍需保留原始 border 声明（如 border: 8px solid black），否则 border-collapse 会因缺失边框而改变整体表格边框计算逻辑，导致布局错位；其颜色值实际无效，可忽略。 伪元素默认覆盖单元格内容，可能影响文字选中（用户点击拖拽时可能选中不到文本）。若需支持选中，可添加 pointer-events: none 到伪元素上： td.dark::after { pointer-events: none; }推荐为不同方案添加语义化类名（如 .s1, .s2），便于维护与复用。
最终效果：无论目标单元格位于表格任意位置（左上、右下、中间），其“强调边框”均能稳定、完整地呈现，彻底规避原生边框合并带来的不确定性。
