Marge des cellules CSS

Question

Dans mon document HTML, j'ai un tableau à deux colonnes et plusieurs lignes. Comment puis-je augmenter l'espace entre la première et la deuxième colonne avec css ? J'ai essayé d'appliquer "margin-right : 10px ;" à chacune des cellules du côté gauche, mais sans résultat.

Answer 1

Un mot d'avertissement : bien que padding-right peut résoudre votre problème particulier (visuel), ce n'est pas la bonne façon d'ajouter un espacement. entre les cellules du tableau. Qu'est-ce que padding-right fait pour une cellule est similaire à ce qu'elle fait pour la plupart des autres éléments : elle ajoute de l'espace sur la cellule. Si les cellules n'ont pas de bordure, de couleur d'arrière-plan ou tout autre élément qui trahit le jeu, cela peut imiter l'effet du réglage de l'espace entre les cellules, mais pas autrement.

Comme quelqu'un l'a fait remarquer, les spécifications de marge sont ignorées pour les cellules de tableau :

Spécification CSS 2.1 - Tableaux - Disposition visuelle du contenu des tableaux

Les éléments de tableau internes génèrent des boîtes rectangulaires avec du contenu et des des bordures. Les cellules ont également un rembourrage. Les éléments de tableau internes n'ont pas de marges.

Quelle est la "bonne" méthode alors ? Si vous cherchez à remplacer le cellspacing de la table, alors border-spacing (avec border-collapse désactivé) est un remplacement. Toutefois, si des "marges" par cellule sont nécessaires, je ne suis pas sûr que l'on puisse les réaliser correctement à l'aide de CSS. La seule astuce à laquelle je pense est d'utiliser padding comme ci-dessus, évitez tout style de cellules (couleurs d'arrière-plan, bordures, etc.) et utilisez plutôt des DIV conteneurs à l'intérieur des cellules pour mettre en œuvre ce style.

Je ne suis pas un expert en CSS, donc je pourrais bien me tromper (ce qui serait formidable à savoir !). J'aimerais moi aussi une solution CSS pour la marge des cellules de tableau).

A la vôtre !

Answer 2

Appliquez ceci à votre première <td> :

padding-right:10px;

Exemple HTML :

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Answer 3

Si vous ne pouvez pas utiliser le padding (par exemple vous avez des bordures dans le td) essayez ceci

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

Answer 4

Margin ne fonctionne malheureusement pas sur les cellules individuelles, mais vous pourriez ajouter des colonnes supplémentaires entre les deux cellules que vous voulez séparer par un espace... une autre option est d'utiliser une bordure de la même couleur que le fond...

Answer 5

Je me rends compte que c'est un peu tard, mais pour mémoire, vous pouvez aussi utiliser des sélecteurs CSS pour faire cela (ce qui élimine le besoin de styles en ligne). Ce CSS applique un remplissage à la première colonne de chaque ligne :

table > tr > td:first-child { padding-right:10px }

Et ceci serait votre HTML, sans CSS !

<table><tr><td>data</td><td>more data</td></tr></table>

Cela permet un balisage beaucoup plus élégant, notamment dans les cas où vous devez effectuer un grand nombre de formatages spécifiques avec CSS.