在两个特定< td>之间添加空格 [英] Add space between two particular <td>s

问题描述

我有一个表格

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

如何在< td>

How can I add some space between the <td>s 'Two' and 'Three' alone?

推荐答案

最简单的方法：

The simplest way:

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

但是如果你需要处理背景颜色图像在您的表中。在这种情况下，这里是一个稍微更先进的解决方案（CSS3）：

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):

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

它在单元格右侧放置一个透明边框， / image远离边界，造成细胞之间的间距错觉。

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.

注意：为了这个工作，父表必须有 border-collapse：separate 。如果你必须使用 border-collapse：collapse ，那么你必须对下一个表格单元格应用相同的边框样式，但在左侧，要完成相同的结果。

Note: For this to work, the parent table must have border-collapse: separate. If you have to work with border-collapse: collapse then you have to apply the same border style to the next table cell, but on the left side, to accomplish the same results.

这篇关于在两个特定< td>之间添加空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！