7

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

4

3 回答 3

19

从...开始：

border-collapse:collapse;

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

于 2012-09-14T16:14:12.967 回答
5

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

这会给你这个：

单元格间距示例

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

于 2012-09-14T16:34:23.580 回答
4

您正在寻找边框折叠

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

价值观就是这样。

border-collapse:  collapse | separate | inherit
于 2012-09-14T16:15:19.267 回答