14

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

这是一张图片来说明我的意思：

简而言之，我不想要红色箭头所示的间距（即单元格和表格之间），但我确实想要两个相邻单元格之间的间距。是否有任何“简单”的方法，或者我是否需要采用繁琐的方式为“边界”单元格与“内部”单元格分配不同的样式？

4

3 回答 3

11

一个简单的解决方案，一直对我有用（即使在 IE 中）是给表格一个margin与border-spacing.

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

于 2011-05-26T11:41:32.917 回答
5

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

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>
于 2011-05-26T10:47:32.347 回答
1

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

虚线边框是可以设置为无的表格边框。:)

于 2011-05-26T10:42:54.717 回答