web-dev-qa-db-fra.com

Ajouter un espace entre deux <td> s particuliers

J'ai une table

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

Comment puis-je ajouter de l'espace entre le <td>s ' Deux ' et ' Trois ' seul?

htmlcsshtml-table
6
Shalin

Le moyen le plus simple:

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

Mais cela ne fonctionnera pas si vous devez utiliser des couleurs d'arrière-plan ou des images dans votre tableau. Dans ce cas, voici une solution légèrement plus avancée (CSS3):

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

Il place une bordure transparente à droite de la cellule et éloigne la couleur/l'image d'arrière-plan de la bordure, créant ainsi l'illusion d'un espacement entre les cellules.

Remarque: Pour que cela fonctionne, la table parent doit avoir border-collapse: separate. Si vous devez utiliser border-collapse: collapse, vous devez appliquer le même style de bordure à la cellule de tableau suivante, mais sur le côté gauche, pour obtenir les mêmes résultats.

14
Hubro

Réponse simple: donnez à ces deux tds un champ de style.

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

Tidy one: utilisez le nom de la classe

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

Complexe: utiliser le sélecteur nth-child en CSS et spécifier des valeurs de remplissage spéciales pour ces deux modèles, ce qui fonctionne pour les navigateurs modernes.

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

vous devez définir cellpadding et cellpacing c'est tout.

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

Essayez ceci 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;
}
1
Mr. Alien

Aucune des réponses n'a fonctionné pour moi. Le moyen le plus simple serait d’ajouter <td>s entre width = 5px et background='white' ou quelle que soit la couleur de fond de la page.

Là encore, cela échouera si vous avez une liste de <th>s représentant les en-têtes de table.

0
saran3h

mon choix a été d’ajouter une td entre les deux balises td et de définir la width sur 25px. Cela peut être plus ou moins à votre goût. C'est peut-être ringard, mais c'est simple et ça marche.

0
nik