1

我正在构建一个动态表。

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

所以我正在使用 CSS 属性

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

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

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

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

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

4

2 回答 2

0

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

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/

于 2013-12-10T11:10:22.923 回答
0

如果你使用怎么办

: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;
于 2013-12-10T10:58:20.170 回答