如何防止tr > td元素中的双边框问题

Question

我想知道是否可以防止>元素中的双重边框。如果使用border:1px solid #DDD，则第一个元素将具有所有边框，然后第二个元素也是如此，但因为第一个元素具有border-right而第二个元素具有border-left，则边框会重复，并且同样发生在第二个，其中第一个具有border-bottom而第二个具有border-top。有什么提示吗？我看到这个post，但对我没有用，因为它是针对DIV的，而我正在使用表格。

- ReynierPM

---

你的HTML和CSS长什么样？ - j08691

Answer 1

从以下样式开始：

border-collapse:collapse;

然后根据需要进行微调。使用 :first-child 和 :last-child 伪选择器可以用于修改默认样式的一端。

- Matt Whipple

---

Matt，只需像你和Ryan建议的那样设置border-collapse: collpase;即可正常工作，但我想看一下你所说的调整的示例。能否写一个小例子？ - ReynierPM

如果 border-collapse 能解决问题，那么你就不需要担心了，但伪选择器可以用于更定制化的行为。举个假设的例子，如果你想要在表格单元格之间只有一行不同颜色的垂直边框（而不是在表格边框上），那么你可以这样做：tr.special > td { border-right-color: #f00; } tr.special > td:last-child { border-right-color: #000; } - Matt Whipple

必须应用于table { border-collapse:collapse; }元素，而不是单元格(th、td)级别。 - gav_aus_web

Answer 2

不要在单元格上设置边框，而是在表格本身上设置背景颜色，使其与您想要的边框颜色相同，然后将单元格间隔设置为1px：

HTML：

​<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

CSS：

table {
    background: #ccc;
    border-spacing: 1px;
}
td {
    background: #fff;
    padding: 5px;
}

那么，您将得到以下结果：

请注意，您还需要在单元格本身设置背景颜色，否则表格的背景颜色会显示出来。

- daGUY

---

虽然这个方法可行，但有点不太正规，如果设计需要不同的背景或半透明背景，则不是理想的选择。 - Shmiddty

这种方法非常粗糙，而且混淆了设计的意图：特别是当标准的可接受方法如此容易获取时。 - Matt Whipple

非常hacky？为什么？它是完全有效的，可以实现预期效果，甚至可以在不支持:first-child和:last-child的浏览器中工作。我看不出有什么问题。 - daGUY

不管是不是理想的解决方案，毫无疑问这是最简单的之一。为了更好地理解，请使用background: white;为th、td和任何较深的背景颜色为表格。 - undefined

Answer 3

您正在寻找border-collapse

border-collapse CSS 属性用于选择表格的边框模型。这对表格单元格的外观和样式有很大影响。

其可选值如下：

border-collapse:  collapse | separate | inherit

- Ryan Kinal

---

谢谢，直到现在我才知道这个属性的真正含义。 - ReynierPM

Answer 4

对于之前的答案无法解决问题的人，我使用了table {border-spacing: -2px;}（适用于mPDF）

- Nestor Mancilla