Question

我有一张桌子

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

如何在<td> s'两个'和'三个'之间添加一些空格？

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，则必须将相同的边框样式应用于下一个表格单元格，但是在左侧，以实现相同的结果。

Answer 2

简单回答：给这两个tds一个样式字段。

<tr>
<td>One</td>
<td style="padding-right: 10px">Two</td>
<td>Three</td>
<td>Four</td>
</tr>

整理一个：使用班级名称

<tr>
<td>One</td>
<td class="more-padding-on-right">Two</td>
<td>Three</td>
<td>Four</td>
</tr>

.more-padding-on-right {
  padding-right: 10px;
}

复杂的一个：在CSS中使用nth-child选择器并为这两个指定特殊的填充值，这在现代浏览器中有效。

tr td:nth-child(2) {
  padding-right: 10px;
}

Answer 3

你必须设置cellpadding和cellspacing就是它。

<table cellpadding="5" cellspacing="5">
<tr> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr>
</table>

Answer 4

试试这个Demo

HTML

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

CSS

td:nth-of-type(2) {
   padding-right: 10px;
}

Answer 5

我的选择是在两个td代码之间添加td，并将width设置为25px。它可以或多或少地符合您的喜好。这可能很俗气但很简单而且很有效。

Answer 6

没有一个答案对我有用。最简单的方法是在<td>和width = 5px之间添加background='white'或页面的背景颜色。

如果您有代表表头的<th>列表，同样会失败。

Answer 7

td：nth-of-type（n）{padding-right：10px;}

它将调整所有td之间的自动间距

在两个特定的s之间添加空格

7 个答案: