Dodaj przestrzeń pomiędzy dwoma szczególności <td> s

Question

Mam tabeli

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

Jak mogę dodać trochę przestrzeni między <td> S 'Dwa' i 'Three' sam?

Answer 1

Najprościej:

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

Ale to nie będzie działać, jeśli trzeba pracować z kolorem tła lub obrazów w tabeli. W takim przypadku, tutaj jest nieco bardziej zaawansowane rozwiązanie (CSS3):

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

To umieszcza przezroczystą ramkę z prawej strony komórki i ciągnie kolor tła/obraz z dala od brzegu, tworząc złudzenie rozstawie między komórkami.

Uwaga: Aby to działało, tabela nadrzędna musi mieć border-collapse: separate. Jeśli musisz pracować z border-collapse: collapse, musisz zastosować ten sam styl obramowania do następnej komórki tabeli, ale po lewej stronie, aby osiągnąć te same wyniki.

Answer 2

Try This 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; 
} 

Answer 3

prosta odpowiedź: dać te dwa TDS pola styl.

<tr> 
<td>One</td> 
<td style="padding-right: 10px">Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr> 

Tidy jeden: użycie nazwy klasy

<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 jeden: za pomocą wybieraka nth-child w CSS i określić szczególne wartości wypełnienia do tych dwóch, które działa w nowoczesnych przeglądarek.

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

Answer 4

musisz ustawić cellpadding i komórkę, to wszystko.

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

Answer 5

moim wyborem było dodanie td między dwoma td tagi i ustawić width do 25px. Może być mniej lub bardziej w twoim guście. To może być kiepskie, ale jest proste i działa.