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

Question

我想知道是否可以防止tr > td元素中出现双边框。如果我使用border:1px solid #DDD那么第一个元素将拥有所有边界，然后是第二个元素，但是因为第一个元素具有边框右边而第二个元素具有边框左边，所以边框是双重的，并且相同的情况发生在第二个tr，其中第一个有border-bottom，第二个有border-top。有小费吗？我看到这个post但是对我不起作用，因为对于DIV我正在使用表格。

Answer 1

开始于：

border-collapse:collapse;

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

Answer 2

您正在寻找border-collapse

  

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

值就是这样。

border-collapse:  collapse | separate | inherit

Answer 3

不是在单元格上放置边框，而是将表格本身的背景颜色设置为您想要边框的颜色，然后将单元格间隔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;
}

那会给你这个：

请注意，您还必须在单元格本身上设置背景颜色，否则表格的背景颜色将显示出来。