Ajouter de l'espace entre les deux <td>s
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 les <td>
s 'Deux " et " Trois' seul?
- De padding sur le CSS ou ajouter
 
( espace ) après le texte de Deux.
Vous devez vous connecter pour publier un commentaire.
La façon la plus simple:
Mais qui ne fonctionnent pas si vous avez besoin de travailler avec un fond de couleur ou des images dans votre table. Dans ce cas, ici, c'est un peu plus avancé solution (CSS3):
Il met une bordure transparente à droite de la cellule et de la tire sur la couleur de fond/image loin de la frontière, créant l'illusion de l'espacement entre les cellules.
Note: Pour que cela fonctionne, la table parent doit avoir
border-collapse: separate
. Si vous avez à travailler avecborder-collapse: collapse
ensuite, vous devez appliquer le même style de bordure pour la prochaine cellule de tableau, mais sur le côté gauche, pour atteindre les mêmes résultats.Réponse est Simple: donner à ces deux tds un champ style.
Bien rangé: utiliser le nom de la classe
Complexe: à l'aide de nth-child sélecteur CSS et spécifier rembourrage spécial des valeurs pour ces deux derniers, qui fonctionne dans les navigateurs modernes.
td
éléments comme demandé, même si c'espaces leur contenu en dehors. La différence entre ces deux notions est pertinent par exemple, si les cellules ont de fond ou de la frontière fixée. Il n'y a aucun moyen de vraiment définir l'espacement entre deuxtd
éléments sans réglage de l'espacement entre les cellules.vous devez définir cellpadding et cellspacing que c'est.
Essayer cette Démo
HTML
CSS
mon choix a été d'ajouter un
td
entre les deuxtd
étiquettes et définissez leswidth
à25px
. Il peut être plus ou moins à votre goût. Cela peut être ringard, mais c'est simple et ça fonctionne.Aucune réponse n'a fonctionné pour moi. La façon la plus simple serait d'ajouter
<td>
s entre les deux, avecwidth = 5px
etbackground='white'
ou quelle que soit la couleur d'arrière-plan de la page.De nouveau, ceci ne fonctionnera pas dans le cas où vous avez une liste de
<th>
s représentant les en-têtes du tableau.