10

我有一张桌子

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

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

4

7 回答 7

21

最简单的方法：

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

于 2012-11-10T06:59:36.510 回答
11

简单的回答：给这两个 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;
}​
于 2012-11-10T07:01:43.517 回答
6

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

<table cellpadding="5" cellspacing="5">
<tr> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr>
</table>
于 2012-11-10T09:41:06.573 回答
1

试试这个演示

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;
}
于 2012-11-10T07:01:16.103 回答
1

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

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

于 2018-09-04T09:29:21.653 回答
1

my choice was to add a td between the two td tags and set the width to 25px. It can be more or less to your liking. This may be cheesy but it is simple and it works.

于 2017-08-07T12:30:05.753 回答
0

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

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

于 2020-02-27T06:15:06.460 回答