如何控制表格单元格边框优先级？解决深色边框被覆盖问题

当使用border-collapse: collapse时，相邻单元格的边框会合并，浏览器会按默认规则决定显示优先级，此时z-index对单元格边框无效——因为合并后的边框属于表格整体样式的一部分，无法通过层级属性单独调整。以下是两个可行的解决办法：

方案一：用outline替代border实现层级覆盖 #

outline不会参与边框合并，且默认显示在元素边框的上层。只需调整outline-offset参数，让它和原边框位置重合即可：

table {
  border-collapse: collapse;
  margin:auto;
}

td {
  padding: 10px;
  border: 8px solid lightgrey;
}

td.dark {
  outline: 8px solid black;
  /* 让outline与原border位置完全重叠 */
  outline-offset: -8px;
}

HTML代码无需修改，深色单元格的outline会直接覆盖相邻的浅色边框，完全凸显出来。

方案二：伪元素模拟层级边框 #

给深色单元格添加绝对定位的伪元素，通过z-index让伪元素边框覆盖相邻单元格的边框：

table {
  border-collapse: separate;
  border-spacing: 0;
  margin:auto;
}

td {
  padding: 10px;
  border: 8px solid lightgrey;
  position: relative;
}

td.dark::after {
  content: '';
  position: absolute;
  /* 定位到与单元格边框完全一致的位置 */
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 8px solid black;
  z-index: 1;
}

该方案需要将表格的border-collapse改为separate并设置border-spacing:0，避免单元格间出现空隙；伪元素的层级高于相邻单元格的边框，因此能完整显示深色边框。

内容的提问来源于stack exchange，提问作者Ruy