css - Chrome 中的表格边框样式问题(适用于 FF)

Question

在具有折叠边框的表格中，我需要为某些单元格提供特殊的边框样式。在 Chrome 中这不能正常工作。 (没有折叠边框，结果符合预期。)

table { border-collapse: collapse; }
td { border: 1px solid gray; }

强边框:https://jsfiddle.net/r8h7abnf/上面受影响的单元格的整个底部边框。

td.red { border: 3px solid red; }

无边框:https://jsfiddle.net/yrm8sfLp/并不总是有效。

td.gap { border: 0; }

我能否以某种方式调整样式以使其在两种浏览器中都能正常工作？

Answer 1

编辑:已在 2021 年 7 月发布的 Chrome 92 中修复。2022 年 12 月在 Safari 中仍然存在问题。

---

这是 Chrome 中长期存在的错误:https://crbug.com/2902 :(

如果你想出一种只使用 colspan == 1 的方法，你可以解决它。

请注意，FWIW，将 display:block 添加到 td.red 会在隐式添加的单元格内的框周围放置一个边框。可以看到红色边框没有盖住灰色边框，而是在里面。