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

【问题标题】：How do I get padding between table cells, but not around the entire table?如何在表格单元格之间获得填充，而不是在整个表格周围？
【发布时间】：2011-09-15 05:49:13
【问题描述】：

我希望有一个表格，每个单元格之间有填充，但不在外边缘单元格周围，即不在表格本身周围。 p>

使用：

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

在使用时给我填充：

border-collapse : collapse;

在任何地方都没有填充。

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

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

这只适用于当前一代的浏览器 - 对我来说没有 IE 6 或 7 非常感谢。而且我不会因为 IE 8 而失去任何睡眠，但如果这能奏效就好了。

【问题讨论】：

但是 IE7 还是 IE8？（即没有:last-child 的答案？）

标签： html padding css-tables spacing

【解决方案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。

【讨论】：

实际上，这看起来精确地 像我正在寻找的 - 我不知道有一个 last-child 伪类。
是的，但我警告过你：It only works > IE8. :(
很好，但这不适用于复杂表中的 colspan 和 rowspan。 ;)

【解决方案2】：

您能否修改标记以将 .first 添加到一行中的第一个单元格并将 .last 添加到最后一行，我猜也可以添加到第一行和最后一行，然后适当地填充？

【讨论】：

不现实 - 这将是一项重大的工作和维护的噩梦。