Question

我正在构建一个动态表。

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

所以我使用CSS属性

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

除了这个白色空间不仅仅位于细胞之间这一事实外，它的效果很好;它实际上是在每个细胞周围，包括在桌子边缘的细胞。

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

有没有办法说：＆＃34;如果边框位于桌子的边缘，则在单元格的边框之间放置一个空格＆＃34;

注意：这是一个动态表，所以我想避免为＆＃34;内部＆＃34;提供专用的CSS类。细胞

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

Answer 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/

演示

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

2 个答案: