html - 在两个特定的 <td> 之间添加空格

Question

我有一张 table

<tr>
   <td>One</td>
   <td>Two</td>
   <td>Three</td>
   <td>Four</td>
</tr>

如何在 <td> 之间添加一些空格？单独的“两个”和“三个”？

Answer 1

最简单的方法:

td:nth-child(2) {
    padding-right: 20px;
}​

但如果您需要在表格中使用背景颜色或图像，那将不起作用。在这种情况下，这里有一个稍微更高级的解决方案 (CSS3):

td:nth-child(2) {
    border-right: 10px solid transparent;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

它在单元格右侧放置一个透明边框，并将背景颜色/图像拉离边框，从而在单元格之间产生间距的错觉。

注意:要使其正常工作，父表必须具有 border-collapse: separate。如果您必须使用 border-collapse: collapse，那么您必须将相同的边框样式应用于下一个表格单元格，但在左侧，以实现相同的结果。