Html 在两个特定的 <td> 之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13320036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add space between two particular <td>s
提问by Shalin
I have a table
我有一张桌子
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
How can I add some space between the <td>s 'Two' and 'Three' alone?
如何单独在<td>s ' Two' 和 ' Three'之间添加一些空格？
回答by Hubro
The simplest way:
最简单的方法：
td:nth-child(2) {
padding-right: 20px;
}?
But that won't work if you need to work with background color or images in your table. In that case, here is a slightly more advanced solution (CSS3):
但是，如果您需要处理表格中的背景颜色或图像，这将不起作用。在这种情况下，这里有一个稍微高级的解决方案（CSS3）：
td:nth-child(2) {
border-right: 10px solid transparent;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
}
It places a transparent border to the right of the cell and pulls the background color/image away from the border, creating the illusion of spacing between the cells.
它在单元格的右侧放置一个透明边框，并将背景颜色/图像拉离边框，从而在单元格之间产生间距的错觉。
Note: For this to work, the parent table must have border-collapse: separate. If you have to work with border-collapse: collapsethen you have to apply the same border style to the next table cell, but on the left side, to accomplish the same results.
注意：要使其正常工作，父表必须具有border-collapse: separate. 如果您必须使用，border-collapse: collapse那么您必须将相同的边框样式应用于下一个表格单元格，但在左侧，以实现相同的结果。
回答by xiaoyi
Simple answer: give these two tds a style field.
简单的回答：给这两个 tds 一个样式字段。
<tr>
<td>One</td>
<td style="padding-right: 10px">Two</td>
<td>Three</td>
<td>Four</td>
</tr>
Tidy one: use class name
整洁一：使用类名
<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;
}
Complex one: using nth-child selector in CSS and specify special padding values for these two, which works in modern browsers.
复杂一：在 CSS 中使用 nth-child 选择器并为这两个指定特殊的填充值，这在现代浏览器中有效。
tr td:nth-child(2) {
padding-right: 10px;
}?
回答by Lakshman Kambam
you have to set cellpadding and cellspacing that's it.
你必须设置 cellpadding 和 cellpacing 就是这样。
<table cellpadding="5" cellspacing="5">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
回答by Mr. Alien
回答by nik
my choice was to add a tdbetween the two tdtags and set the widthto 25px. It can be more or less to your liking. This may be cheesy but it is simple and it works.
我的选择是增加td两者之间td的标签，并设置width到25px。它可以或多或少地符合您的喜好。这可能很俗气，但它很简单并且有效。
回答by saran3h
None of the answers worked for me. The simplest way would be to add <td>s in between with width = 5pxand background='white'or whatever the background color of the page is.
没有一个答案对我有用。最简单的方法是<td>在width = 5px和background='white'或页面的背景颜色之间添加s 。
Again this will fail in case you have a list of <th>s representing table headers.
如果您有一个<th>代表表头的s列表，这将再次失败。
回答by abhi
td:nth-of-type(n) { padding-right: 10px;}
td:nth-of-type(n) { padding-right: 10px;}
it will adjust auto space between all td
它将调整所有 td 之间的自动间距
