即使使用`border-collapse: collapse;` 也更改所有四个边框的颜色

该 border-collapse 属性非常适合使<table>单元格周围的所有边框保持一致。它创造了一种干净的外观，我个人更喜欢这种外观。

但是，某些情况可能会导致浏览器绘制单元格及其相应边框的方式出现问题。 每个单元格在绘制时都放置在前面一个单元格的下方。这意味着如果表格具有不同颜色的边框，则某些边的边框会被隐藏。

问题

在下面的代码示例中，将鼠标悬停在单元格上以查看边框如何相互隐藏。

查看 CodePen 上 Daniel (@gooseofmusic) 编写的 Pen 表格边框折叠步骤 1。

由于z-index 不适用于<table> 内部的单元格，因此我们必须使用单元格内部的内容。

解决方案

步骤 1

友情提示：此解决方案将使用负边距。对于那些不喜欢负边距的人，请回避。

首先，我们在单元格内部的内容周围放置一个包装器。将边框、填充等移动到内部内容以进行匹配。

查看 CodePen 上 Daniel (@gooseofmusic) 编写的 Pen 表格边框折叠步骤 2。

仅此一项实际上就会反转问题：底部和右侧的边框会显示在顶部。

步骤 2

从那里，我们还必须将z-index 添加到:hover 状态，以便它堆叠在其他元素之上。因为我们正在对表格单元格内部的内容进行 z 索引，而不是<td> 本身，所以它可以正常工作。

查看 CodePen 上 Daniel (@gooseofmusic) 编写的 Pen 表格边框折叠步骤 3。

确保z-index 未包含在任何transition 中，否则您将看到以前隐藏的边框“滑动”到视图中，而不是淡入。