之間有兩個特別小號

添加的空間，我有一個表之間有兩個特別小號

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

我如何可以添加<td> S「兩個」和「三」獨自之間的一些空間呢？

來源

2012-11-10 Shalin

在CSS上設置填充或在文本後面加上'＆＃160'（其空格）二。 –

最簡單的方法：

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-10 06:59:36 Hubro

試試這個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; 
}

來源

2012-11-10 07:01:16

答案很簡單：給這兩個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第n個孩子選擇並指定這兩個，這在現代瀏覽器上運行的特殊填充值。

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

來源

2012-11-10 07:01:43 xiaoyi

從技術上講，這並不會增加'td'元素之間的間距，儘管它將內容分開。這些概念之間的差異與例如如果單元格具有背景或邊框設置。沒有設置兩個'td'元素之間的間距而沒有在所有單元之間設置間距。 –

你說得對。由於無法在兩個特定的tds之間提供一些額外的空間，這是我能想出的唯一的東西。 – xiaoyi

@ JukkaK.Korpela：嚴格地說，是真的。但實際上我的解決方案確實解決了你提到的問題，請看下面的答案。 – Hubro

你必須設置cellpadding和cellspacing就是這樣。

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

來源

2012-11-10 09:41:06

這不僅不會做什麼問題，所有這些屬性都不應該再被使用。 –

我的選擇是增加一個td兩者之間td標籤和設置width到25px。它可以或多或少地符合你的喜好。這可能很俗氣，但很簡單，它的工作原理。

來源

2017-08-07 12:30:05 nik

之間有兩個特別​​小號

回答

相關問題

之間有兩個特別小號