CSS表格边框异常：两处边角未变红的原因及修复方案

为什么只有这两个边角异常？ #

因为你给表格设置了border-collapse: collapse，这个属性会把相邻单元格的边框合并成一条。你只设置了(5,5)周围四个单元格的单一边框，但那两个灰色边角其实是第三个单元格的边框和你设置的红色边框合并后露出来的：

• 左上角的灰角：属于(4,4)单元格的右下边框，它和(4,5)的右边框、(5,4)的下边框合并，你没给这个边框设红色，所以显示灰色。
• 右下角的灰角：属于(6,6)单元格的左上边框，它和(6,5)的左边框、(5,6)的上边框合并，同样没设置红色，所以显示灰色。

怎么修复？ #

直接给这两个单元格的对应边框加上红色样式就行，在你的CSS代码末尾添加：

/* 修复左上角灰色边角 */
td[data-x="4"][data-y="4"] {
  border-bottom-color: red !important;
  border-right-color: red !important;
}
/* 修复右下角灰色边角 */
td[data-x="6"][data-y="6"] {
  border-top-color: red !important;
  border-left-color: red !important;
}

这样所有边角就都会显示红色了。

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