单元格边框上方的CSS重叠到单元格边框下方

Question

将边框应用于表格中的单个单元格时会出现问题。我有一张桌子，我将边框应用于单个单元格。然后我有一个开关，我可以切换＆＃34;一般＆＃34;整个表的网格线。具有单独边界的单元格保持其边界，而其他单元格显示一般边界。

图片解释：

1. 没有一般边界



1. With General Borders



您可能已经看到了问题。

所以一切都运作良好，但在一个案例中（刚发现这个，不确定为什么不在其他情况下发生）单元格文本是＆＃34;双边框下面＆＃34;当打开一般边框时，顶部的单个边框消失。

现在我已经调试了很多，并且意识到上面的单元格的底部边界实际上是＆＃34;重写＆＃34;下面单元格的顶部边框。我不知道为什么以及我能做些什么呢。

一些代码段：

<table id="pageContent" ng-class="{'with-borders':showGridlines}"></table>

.page-content table {
    table-layout: fixed;
    border-collapse: collapse;
}

.page-content table.with-borders td {
    border:1px solid #d4d4d4;
}

根据接收的数据计算并添加单个单元格边框样式。它直接应用于 td 元素，因此它起作用，因为内联样式具有样式表的优先级。

为什么这个特殊边界会产生问题？

谢谢

更新1

生成后单元格的标记：

<td style="font-size: 11pt; color: rgb(0, 0, 0); height: 20px; white-space: nowrap; font-style: normal; border-bottom: 3px double rgb(0, 0, 0); width: 151px ! important; font-weight: normal; background-color: rgb(255, 255, 255); border-top: 1px solid rgb(0, 0, 0); font-family: Calibri,Arial,Helvetica,sans-serif; text-align: left;" id="C_2_0"><div>Double border below</div></td>

这是直接从浏览器控制台获取的。浏览器会根据自己的喜好改变样式。文字生成的内联样式是：

 font-size:11pt;
 border-left-width:;
 color:#000000;
 border-left-style:;
 height:20px;
 border-left-color:;
 white-space:nowrap;
 font-style:normal;
 border-bottom-color:#000000;
 width:151px !important;
 border-bottom-width:3px;
 font-weight:normal;
 border-bottom-style:double;
 background-color:#FFFFFF;
 border-top-style:solid;
 border-top-width:1px;
 border-top-color:#000000;
 font-family:Calibri,
 Arial,
 Helvetica,
 sans-serif;
 text-align:left;
 border-right-width:;
 border-right-style:;
 border-right-color:;

由于某种原因无法使标记突出显示