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

Question

我想知道是否可以防止tr > td元素中出现双边框.如果我使用border:1px solid #DDD那么第一个元素将具有所有边界,然后第二个元素也将具有边框 - 右边,而第二个具有边框 - 左边,然后边界是双倍的,并且对于第一个具有第二个tr的情况也是如此border-bottom和second有border-top.有小费吗？我看到这篇文章但对我不起作用,因为对于DIV我正在使用表格.

Answer 1

从...开始:

border-collapse:collapse;

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

Answer 2

你正在寻找边界崩溃

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;
}

这会给你这个：

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