React表格选中单元格仅右下边框显示，左上边框被覆盖原因咨询

将以下CSS和HTML代码放入普通环境时，中心单元格的四个蓝色边框可正常显示，但在React项目中点击中心单元格后，仅右侧和下侧边框正常显示，左侧和上侧边框被覆盖，请问这是什么原因？

相关代码 #

CSS代码 #

.borderCell {
    border: 1px solid #e0e0e0;
}
.shiftCell{
    background-color:#ff99cc;
    min-width:27px;
    text-align: center; 
}
.shiftContent:focus{
    outline: none
}
.shiftContent{
    padding: 0px;
    margin: 0px;
}
.shiftContent::-moz-selection{
    background: none; 
}
.shiftContent::selection{
    background: none; 
}
.littleSquareDiv {
    background-color: rgb(0, 140, 255);
    top: calc(100% - 3px);
    left: calc(100% - 3px);
    height: 6px;
    position: absolute;
    width: 6px;
    z-index: 10;
}

.littleSquareDiv:hover {
    cursor: crosshair;
}
.selectCellBorderBottom{
    border-bottom: 1px solid rgb(0, 140, 255);
}
.selectCellBorderLeft{
    border-left: 1px solid rgb(0, 140, 255);
}
.selectCellBorderRight{
    border-right: 1px solid rgb(0, 140, 255);
}
.selectCellBorderTop{
    border-top: 1px solid rgb(0, 140, 255);
}

HTML代码 #

<table class="m-3">
  <tbody>
    <tr>
      <td class="borderCell shiftContent " contenteditable="true">0,0</td>
      <td class="borderCell shiftContent " contenteditable="true">1,0</td>
      <td class="borderCell shiftContent " contenteditable="true">2,0</td>
    </tr>
    <tr>
      <td class="borderCell shiftContent " contenteditable="true">0,1</td>
      <td class="borderCell shiftContent selectCellBorderTop selectCellBorderBottom selectCellBorderRight selectCellBorderLeft" contenteditable="true">1,1</td>
      <td class="borderCell shiftContent " contenteditable="true">2,1</td>
    </tr>
    <tr>
      <td class="borderCell shiftContent " contenteditable="true">0,2</td>
      <td class="borderCell shiftContent " contenteditable="true">1,2</td>
      <td class="borderCell shiftContent " contenteditable="true">2,2</td>
    </tr>
  </tbody>
</table>

预期效果 #

核心原因是表格单元格的边框重叠特性，再加上React项目中引入的全局样式（比如从m-3类能看出可能用到了Bootstrap这类框架），进一步影响了边框的层叠优先级。

在默认表格布局中，相邻单元格的边框会重叠显示。中心单元格的上、左边框，会被其上方、左侧单元格的灰色边框（.borderCell类）覆盖；而右侧和下侧没有单元格覆盖，所以蓝色边框能正常显示。普通环境中可能没有额外全局样式干扰，所以边框显示正常，但React项目里的全局样式让相邻单元格的边框优先级更高。

推荐两种解决方法：

1. 调整表格边框渲染规则（更符合CSS规范）：给表格添加border-collapse: separate; border-spacing: 0;，让单元格边框独立不重叠：

table.m-3 {
    border-collapse: separate;
    border-spacing: 0;
}

2. 提升选中边框优先级：通过更具体的选择器或!important强制让选中状态的边框显示：

.shiftContent.selectCellBorderLeft {
    border-left: 1px solid rgb(0, 140, 255) !important;
}
.shiftContent.selectCellBorderTop {
    border-top: 1px solid rgb(0, 140, 255) !important;
}

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