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

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

制作：

on jsFiddle。

Answer 2

你可以摆弄标记，将.first添加到一行中的第一个单元格，然后添加到.last到最后一行，我猜也是第一行和最后一行，然后适当填充？