在 `border-collapse: collapse` 模式下，css 表格边框会按算法合并，导致深色边框被邻近浅色边框部分遮盖。本文介绍两种可靠方案：利用 `::after` 伪元素配合 `position: absolute` 绘制覆盖层边框或阴影，从而强制指定单元格边框“脱颖而出”。

当使用 border-collapse: collapse 时，浏览器会依据 CSS Table Border Conflict Resolution 规则统一处理相邻单元格边框——边框宽度、样式、颜色共同决定最终渲染结果。这意味着即使你为某个

直接使用 z-index 无效，因为 z-index 在非定位元素上不生效，且表格单元格在 border-collapse 模式下不形成独立堆叠上下文。真正的突破口在于脱离文档流的伪元素覆盖。

✅ 推荐方案：使用 ::after 伪元素 + position: absolute

该方法通过为 .dark 单元格创建一个绝对定位的伪元素，精准包裹内容区域，并绘制不受 border-collapse 影响的边框或阴影：

/* 必须保留原 border 以维持 collapse 布局结构 */
td.dark { 
  border: 8px solid black; /* 颜色实际不显示，仅占位 */
  position: relative;      /* 创建新 stacking context */
}

/* 方案一：用 border 模拟外扩边框 */
td.dark.s1::after {
  content: '';
  position: absolute;
  inset: -8px; /* 向外扩展 8px，完全覆盖原边框区域 */
  border: 8px solid black;
  z-index: 1;
}

/* 方案二：用 box-shadow 实现更轻量的描边效果（推荐） */
td.dark.s2::after {
  content: '';
  position: absolute;
  inset: 0; /* 贴合单元格内边沿 */
  box-shadow: 0 0 0 8px black;
  z-index: 1;
}

? 关键要点说明：

• inset: -8px 等价于 top: -8px; right: -8px; bottom: -8px; left: -8px，使伪元素向外延伸，确保边框完整覆盖原始边框交界处；
• inset: 0 + box-shadow 更简洁高效，无额外盒模型开销，且天然支持圆角（添加 border-radius 即可）；
• .dark 必须设 position: relative，否则 ::after 的 absolute 定位将相对于 或最近定位祖先，而非当前单元格；
  若需用户可选中文本，建议搭配 pointer-events: none 到伪元素上（默认 ::after 不拦截事件，但显式声明更稳妥）：

  td.dark::after {
    pointer-events: none; /* 允许底层文本正常被选中和交互 */
  }

  ⚠️ 注意事项：

  • 此方案依赖 CSS ::after 和 position: absolute，兼容性良好（IE9+），但不适用于需严格语义化或无障碍要求极高的场景（此时应考虑重构为 display: grid 布局）；
  • 避免对 .dark 单元格设置 overflow: hidden，否则可能裁剪伪元素；
  • 若表格存在动态内容或高度变化，::after 会自动跟随尺寸，无需 JS 干预。

  综上，当标准 border 层叠逻辑无法满足视觉优先级需求时，用伪元素“画一层边框”是最可控、最符合现代 CSS 实践的解决方案。