控制表格单元格之间的间距

Question

我正在尝试创建一个表格，其中每个单元格都有背景颜色，它们之间有空白区域。但我似乎无法做到这一点。

我尝试设置td页边距，但似乎没有效果。

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}​

如果我用填充做同样的事情，它可以工作，但是我没有单元格之间的间距。

有人可以帮我这个吗？

jsFiddle：http://jsfiddle.net/BfBSM/

Answer 1

使用table元素上的border-spacing属性设置单元格之间的间距。

确保border-collapse设置为separate（或者每个单元格之间只有一个边框，而不是每个单元格周围可以有间距的单独边框。）

Answer 2

检查fiddle。您将需要查看使用边框折叠和边框间距。 IE有一些怪癖（像往常一样）。这基于an answer到this question。

HTML：

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>​

CSS：

table.test td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
}

Answer 3

table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}

Answer 4

要完成工作，请使用

<table cellspacing=12>

如果您比完成任务更“正确”，则可以使用某些浏览器支持的CSS属性border-spacing。

Answer 5

使用border-collapse和border-spacing来获取表格单元格之间的空格。我不建议使用QQping建议的浮动单元。

JSFiddle