仅在Chrome中显示错误的表格边框**已确认错误**

Question

我有一个似乎与Chrome隔离的问题...这通常不是它的方式。但是，我已经在下面的plunkr中尽可能地重新创建了这个问题。

http://plnkr.co/edit/k0viyc

为了说明问题，这里有一个图像，显示Chrome中突出显示的行中的边框以及它在IE中的显示方式。

如果您删除以下任一行：

<tr class="spacer">
  <td colspan="14" class="noBorder noBackground">
    *** By removing this row, the extended border goes away ***
  </td>
</tr>

您将看到相关的边框显示/隐藏。

我们已经对此进行了大量测试，无法隔离问题。主css保留在plunkr中，包括内联样式和类，它们主要是相关绑定的副产品。

我想知道当前设计中是否存在错误，或者这确实是Chrome中的错误。如果它是一个bug，那么重新创建它需要什么最不常见的元素？是否值得提交为一个错误，或者这只是一个我们应该尽量避免的情况。

感谢您的提前时间。

Answer 1

看起来像是一个Chrome错误。

最小的展示再现

.test {
  border-collapse: collapse;
}

td {
  border: solid 1px blue;
}

.no {
  border: none;
}

<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>

Chromium跟踪（不知何故）与border rendering bug

相关

有点令人不安的提及

  

这是我们的表格代码中已知（旧）的问题。折叠边界是   基于相邻单元格确定，我们的代码处理不正确   使用跨越单元格（我们只考虑邻接第一行的单元格   行/列跨度中的/列）。最重要的是，我们的边界   粒度由单元格的跨度决定。

     

要修复此错误，我们需要彻底检查崩溃的边界代码，   这是一项艰巨的任务。

总结：

如果表格有 border-collapse

并且该单元格 colspaning

然后不同的边框设置（对于该单元格，隐式）将失败

解决问题的可能性：

设置border-style：隐藏到单元格具有更高的优先级，并将隐藏所有边框（不好）

删除垫片中的colspan

或者可以完全移除间隔行并在没有它们的情况下处理显示。

Answer 2

与tr.spacer相关的一些故障。

将解决方法设置为colspan=7中的td至tr.spacer。

Answer 3

由于这似乎是Chrome的错误 - 而不是使用colspan，您可以写出完成该行所需的剩余单元格，并确保它们没有包含边框的类。

此：

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border">&nbsp;</td></tr>

会变成：

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border">&nbsp</td><td class="no-border">&nbsp;</td></tr>

我不得不使用border-collapse，并且遇到了同样的问题。这个简单的HTML标记更改对我有用。

Answer 4

在我想了好几天之后，终于有了一个超级hacky解决方案。 将边框颜色设置为与背景相同的颜色。

td {
  border: 1px solid (background color);
}