Pourquoi la marge ne fonctionne-t-elle pas sur les cellules d'un tableau CSS et comment puis-je ajouter un espacement à la place ?

Marges sur les cellules du tableau

En CSS, lorsque vous définissez la propriété d'affichage d'un élément sur table-cell, vous créez un structure en forme de table. Toutefois, les cellules du tableau ne sont pas affectées par la propriété margin. La propriété margin définit l'espace en dehors des bordures de l'élément, mais les cellules du tableau n'ont pas de bordures par défaut.

Cause

Selon la documentation MDN, la propriété margin s'applique à tous les éléments, à l'exception des éléments dont les types d'affichage de tableau sont autres que table-caption, table et inline-table. Par conséquent, étant donné que table-cell ne fait pas partie des types d'affichage de tableau exemptés, la propriété margin ne lui est pas applicable.

Solution

Pour obtenir l'objectif souhaité espacement entre les cellules du tableau, utilisez plutôt la propriété border-spacing. La propriété border-spacing définit l'espace entre les bordures des cellules adjacentes du tableau. Il doit être appliqué à un élément parent avec une disposition display:table et border-collapse:separate.

<br>HTML:<br><div><pre class="brush:php;toolbar:false"><div>
<p>&lt ;/div></p>
<p>CSS :<br>.table {</p>
<pre class="brush:php;toolbar:false">display: table;
border-collapse: separate;
border-spacing: 5px;

}
.row {

display: table-row;

}
.cell {

display: table-cell;
padding: 5px;
border: 1px solid black;

}
> ;

Notez que border-spacing accepte deux valeurs pour définir des marges différentes pour les axes horizontal et vertical, si souhaité.