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

这是Chrome中一个非常悠久的错误：https://crbug.com/2902：（

如果您想出一种仅使用colspan == 1的方法，则可以解决此问题。

请注意，FWIW在public class User implements Serializable { public static final String TABLE_NAME = "users"; @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private long id; @Column(nullable = false, columnDefinition = "bit default 0") private boolean isAdmin; @ManyToMany(fetch = FetchType.LAZY, cascade = CascadeType.ALL) private List<User> following = new ArrayList<>(); @ManyToMany(fetch = FetchType.LAZY, mappedBy = "following") private List<User> followers = new ArrayList<>(); } 上添加了display：block，在隐式添加的单元格内的框周围放置了边框。您会看到红色边框不会覆盖灰色边框，而是位于灰色边框内部。