如何在表格单元格之间填充,而不是在整个表格周围填充？

Question

我希望在每个单元格之间有一个填充表,但不是在外边缘单元格周围,也就是说,不在表格本身周围.

使用:

border-collapse : separate;
border-spacing  : 0.5em;

给我填充到处,同时使用:

border-collapse : collapse;

在任何地方都没有填充.

尝试另一种方法,我可以得到填充单独之间的细胞水平使用td + td选择器.但是我不能使用tr + tr选择器,因为它似乎tr忽略了边距,填充和边界规则.

当然,普通td选择器上的填充适用于所有单元格,甚至是外部单元格的外边缘.

这只适用于当代浏览器 - 对我来说没有IE 6或7非常感谢你.而且我不会在IE 8上失去任何睡眠,尽管如果有效的话会很好.

Answer 1

这不是一个完美的解决方案，因为它使用填充而不是边框​​间距。也许它会解决你的问题。

HTML：

<table>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

还有CSS：

table {
    border: 1px red solid;
    border-collapse: separate;
}

td {
    background-color: green;
    border: 1px black solid;
    padding: 10px;
}

td:first-child {
    padding-left: 0px;
}

td:last-child {
    padding-right: 0px;
}

tr:first-child td {
    padding-top: 0px;
}

tr:last-child td {
    padding-bottom: 0px;
}

生产：

也在jsFiddle 上。