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

Question

我想知道是否可以防止 tr > td 元素中的双边框。如果我使用 border:1px solid #DDD 那么第一个元素将具有所有边框，然后是第二个元素，但是因为第一个元素有一个右边框，第二个有一个左边框，那么边框是双倍的，同样的情况也会发生对于第二个 tr，其中第一个具有边框底部，第二个具有边框顶部。有小费吗？我看到了这篇 文章，但对我不起作用，因为它适用于 DIV 并且我正在使用表格。

原文由 ReynierPM 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从…开始：

border-collapse:collapse;

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

原文由 Matt Whipple 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 发布，翻译遵循 CC BY-SA 3.0 许可协议