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

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 上。

Answer 2

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