在两个特定的 <td> 之间添加空格答案

【问题标题】：Add space between two particular <td>s在两个特定的 <td> 之间添加空格
【发布时间】：2020-02-27 14:15:06
【问题描述】：

我有一张桌子

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

如何在<td>s 'Two' 和 'Three' 之间单独添加一些空格？

【问题讨论】：

在 CSS 上设置填充或在文本二之后添加 &#160（其空格）。

标签： html css html-table

【解决方案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，那么您必须将相同的边框样式应用于下一个表格单元格，但在左侧，以实现相同的结果。

【讨论】：

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

【讨论】：

从技术上讲，这不会按要求在 td 元素之间添加间距，即使它会将它们的内容分开。这些概念之间的区别是相关的，例如如果单元格设置了背景或边框。如果不设置所有单元格之间的间距，就无法真正设置两个 td 元素之间的间距。
你是对的。由于无法在两个特定的 td 之间留出一些额外的空间，所以这是我唯一能想到的。
@JukkaK.Korpela：严格来说，是的。但实际上，我的解决方案确实解决了您提到的问题，请在下面查看我的答案。

【解决方案3】：

你必须设置 cellpadding 和 cellspacing 就是这样。

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

【讨论】：

这不仅完全不符合问题的要求，而且这些属性不应再被使用。

【解决方案4】：

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

【讨论】：

这是这里最简单、最简单、最清晰、最准确的答案。这个我也用过！干得好。

【解决方案5】：

试试这个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;
}

【讨论】：

【解决方案6】：

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

如果您有一个代表表头的<th>s 列表，这将再次失败。

【讨论】：

如果您在具有相同宽度的中添加相同的内容，它不会失败。谢谢！

【解决方案7】：

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

它会调整所有 td 之间的自动间隔

【讨论】：