HTML边框的默认行为似乎与单元格背景颜色不同，会产生某种对比度，从而覆盖定义的边框颜色。我试图跟踪问题以关闭此覆盖，但找不到它的来源。
下面的例子演示了这个问题：
table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-color: lightgray;
}
.lav {
background-color: lavender;
}
.medBlue {
background-color: mediumblue;
}<body>
<table>
<tr class="lav">
<th>Firstname</th>
<th>_</th>
<th>Lastname</th>
</tr>
<tr class="lav">
<td>Peter</td>
<td>_</td>
<td>Griffin</td>
</tr>
<tr class="medBlue">
<td>Lois</td>
<td>_</td>
<td>Griffin</td>
</tr>
</table>
</body>正如预期的那样，前两行的边框颜色为浅灰色。但是，背景较暗的第三行的边框颜色会被其他颜色覆盖。
如何使这张桌子的边框颜色统一？
这里也提出了类似的问题，但我认为这个问题与透明度无关(至少，深色单元格的边框颜色会更暗，而不是更亮)。
这个问题似乎与缩放程度有关，这让我相信这是浏览器对边框宽度(任意？)被认为太小时所做的更正。换句话说，当放大表格时，颜色会更改为预期颜色。一个变通办法就是简单地使边界变厚，但我想避免这种情况。当使用PhantomJS加载这样的表并随后对其进行屏幕截图时，这个问题仍然存在，这正是我需要这段代码的原因。
你唯一能做的就是增加边框颜色的暗度来取悦眼睛。CCD_ 1。
table, th, td {
border: 1px solid black;
border-collapse: collapse;
border-color: lightgray;
}
.lav {
background-color: lavender;
}
.medBlue {
background-color: mediumblue;
}
.medBlue td {
border-color: gray;
}<body>
<table>
<tr class="lav">
<th>Firstname</th>
<th>_</th>
<th>Lastname</th>
</tr>
<tr class="lav">
<td>Peter</td>
<td>_</td>
<td>Griffin</td>
</tr>
<tr class="medBlue">
<td>Lois</td>
<td>_</td>
<td>Griffin</td>
</tr>
</table>
</body>