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

Posted 2023-03-05

【中文标题】仅在 Chrome 中显示错误的表格边框**已确认的错误**

【英文标题】：Erroneous table border displays in Chrome only **Confirmed Bug**

【发布时间】：2015-05-30 16:58:17

【问题描述】：

我有一个似乎与 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 中的错误。如果它是一个错误，那么重新创建它所需的最不常见的元素是什么？是否值得作为错误提交，或者这只是我们应该尽量避免的情况。

提前感谢您的宝贵时间。

【参考方案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

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

【讨论】：

我们确实删除了额外的 colspan，这些 colspan 将间隔行从现有的“添加”行中取出。我们需要一些宽度，以便在其中一排中我们有一个很小的信息，有时会抬起头来。感谢您编译一些额外的世界现状主题。

很高兴它有帮助！

【参考方案2】：

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

作为一种解决方法，在tr.spacer 中将colspan=7 设置为td。

【讨论】：

臭名昭著的“故障”，嗯？我同意这会将有问题的行拉回我希望它们默认的位置。我仍然想知道“为什么”。

我真正想说的是......我知道这是一个可用的解决方法，但我宁愿找到一个不违反标准的解决方案，即使我必须输入更多.

【参考方案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>

我不得不使用边框折叠，并且遇到了同样的问题。这个简单的 html 标记更改对我有用。

【参考方案4】：

在我考虑了这个问题几天之后，一个超级 hacky 的解决方案终于击中了我。 将边框颜色设置为与背景相同的颜色。

td 
  border: 1px solid (background color);