下面是react代码的输出：

.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);
}

<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>

当我把代码放到jsfiddle时，中心单元格4的边框可以成功显示，不幸的是，当上面的代码由react（请点击中心单元格）只输出右边时，中心单元格的下边框可以成功显示。
你能告诉我为什么吗？
预期结果如下：