HTML / CSS格式：单元格＆lt; - ＆gt;之间的TRUE间距细胞，而不是细胞之间的细胞。任何

Question

我正在寻找关于表格单元格间距的提示。我知道 HTML中的cellspacing / cellpadding及其CSS等价物border-spacing / padding，但是他们按照他们的名字做的更多。我想要实现的是像术语所暗示的cellspacing：单独在单元格之间的间距，而不是单元格与其周围的任何元素之间的间距。

这是一张显示我的意思的图片：

简而言之，我不希望红色箭头所示的间距（即在单元格和表格之间），但我确实需要两个相邻单元格之间的间距。有没有“简单”的方法，或者我是否需要采用繁琐的方式将不同的syles分配给'边界'细胞而不是'内部'细胞？

Answer 1

一个对我来说一直很有效的简单解决方案（即使在IE中）就是给表格margin设置与border-spacing相同的尺寸。

快速而肮脏的样本：http://jsfiddle.net/rBkPQ/

Answer 2

试试这个：http://jsfiddle.net/dBSWV/

IE8不支持:last-child，因此如果您需要它在那里工作，您需要使用例如tr.last > td > div并添加.last类。

table {
    border: 1px solid red
}
td > div {
    border: 1px solid #000;
    margin: 5px
}
tr:first-child > td > div {
    margin-top: 0
}
tr:last-child > td > div {
    margin-bottom: 0
}
td:first-child > div {
    margin-left: 0
}
td:last-child > div {
    margin-right: 0
}

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><div>Content 1</div></td>
        <td><div>Content 2</div></td>
        <td><div>Content 3</div></td>
    </tr>
    ..
</table>

Answer 3

也许是这样的：http://jsfiddle.net/H37BG/6/

虚线边框是表格边框，您可以将其设置为无。 ：）