表格边框间距：表格周围没有空间答案

【问题标题】：Table border-spacing : no space arround the table表格边框间距：表格周围没有空间
【发布时间】：2013-12-27 20:28:47
【问题描述】：

我正在构建一个动态表。

每个单元格的背景颜色为灰色，我希望每个单元格之间有一个空白区域（垂直和水平）。

所以我使用的是 CSS 属性

table {
border-spacing:10px;
}
td {
background-color:grey;
}

除了这个空白不仅在单元格之间，它还可以很好地工作。它实际上是在每个单元格周围，包括位于表格边缘的单元格。

这意味着桌子周围有空白。

有没有办法说：“如果该边框位于表格边缘，则在单元格的边框之间放置一个空格”

注意：这是一个动态表格，所以我想避免为“内部”单元格设置专用的 CSS 类。

【问题讨论】：

标签： css html-table border-spacing

【解决方案1】：

如果你使用会怎么样

:not(:first-child):not(:last-child)

在你的 CSS 中？这是一个解决方案吗？

看起来像

table:not(:first-child):not(:last-child)
{
    border-spacing:10px;
}

您可以使用更多参数来分隔间距：

border-spacing: 10px 10px;

或

border-spacing: 5px 10px 5px 10px;

【讨论】：

我相信边框间距在桌面上，而不是在单元格上。

【解决方案2】：

你也许可以实现你想要的设计

table {
    border-collapse:collapse;
}
td {
    background-color:grey;
    border:10px solid red; /*assuming red is the color of the background to make it look transparent*/
}
tr:first-child td{border-top:0}
tr:last-child td{border-bottom:0}
td:first-child{border-left:0;}
td:last-child{border-right:0;}

http://jsfiddle.net/gaby/cHpTE/的演示

【讨论】：