HTML/CSS格式:单元格< - >单元格之间的TRUE间距,而不是单元格< - >任意之间

Question

我正在寻找关于表格单元格之间间距的提示.我知道 cellspacing/ cellpadding在HTML和他们的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>