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

Question

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

我尝试设置td边距但似乎没有效果.

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

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

有人可以帮我吗？

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

Answer 1

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

确保border-collapse设置为separate(或者每个单元格之间将有一个单独的边框,而不是每个单元格周围可以有间距的单独边框).

Answer 2

检查这个小提琴.您将需要查看使用边框折叠和边框间距.IE有一些怪癖(像往常一样).这是基于一个答案到这个问题.

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');
}