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

Question

我希望能在表格的每个单元格间添加填充，但不包括边缘单元格，也就是说，不包括整个表格的外围。

使用以下代码：

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

在使用时，给我添加了全局内边距：

border-collapse : collapse;

没有任何地方提供填充。

尝试另一种方法，我可以使用td + td选择器仅在单元格之间水平地获取填充。然而，我不能使用tr + tr选择器，因为似乎tr忽略了边距、填充和边框规则。

当然，对于普通的td选择器，填充应用于所有单元格，甚至是外部单元格的外边缘。

这只需要在当前的浏览器中工作——不需要IE 6或7，谢谢。虽然如果那个能工作就好了，但我不会因此失眠。

- Lawrence Dol

---

但是IE7还是IE8？（即没有“：last-child”答案？） - Kirk Woll

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

- Kirk Woll

---

实际上，那看起来恰好就是我正在寻找的 - 我不知道有一个last-child伪类。 - Lawrence Dol

是的，但我警告过你：它只适用于IE8以上的版本。 :( - Kirk Woll

不错，但在复杂表格中无法与colspan和rowspan一起使用。 ;) - user706420

Answer 2

你能否调整标记以将 .first 添加到行中的第一个单元格，将 .last 添加到最后一个单元格，我猜还需要加到第一行和最后一行，然后适当地填充吗？

- Don Zacharias

---

不现实 - 这将是一个巨大的努力和维护噩梦。 - Lawrence Dol