Warum funktioniert der Rand bei CSS-Tabellenzellen nicht und wie kann ich stattdessen Abstände hinzufügen?

Ränder an Tabellenzellen

Wenn Sie in CSS die Anzeigeeigenschaft eines Elements auf Tabellenzelle festlegen, erstellen Sie eine tischartige Struktur. Tabellenzellen sind jedoch von der Randeigenschaft nicht betroffen. Die Eigenschaft „Margin“ legt den Abstand außerhalb der Ränder des Elements fest, aber Tabellenzellen haben standardmäßig keine Ränder.

Ursache

Laut der MDN-Dokumentation Die Eigenschaft „margin“ gilt für alle Elemente mit Ausnahme von Elementen mit anderen Tabellenanzeigetypen als „table-caption“, „table“ und „inline-table“. Da es sich bei „table-cell“ nicht um einen der ausgenommenen Tabellenanzeigetypen handelt, ist die Eigenschaft „margin“ nicht auf sie anwendbar.

Lösung

Um das Gewünschte zu erreichen Wenn Sie den Abstand zwischen Tabellenzellen ändern möchten, verwenden Sie stattdessen die Eigenschaft „border-spacing“. Die Eigenschaft border-spacing legt den Abstand zwischen den Rändern benachbarter Tabellenzellen fest. Es sollte auf ein übergeordnetes Element mit einem display:table-Layout und border-collapse:separate angewendet werden.

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

}
> ;

Beachten Sie, dass border-spacing zwei Werte akzeptiert, um unterschiedliche Ränder für horizontale und vertikale Achsen festzulegen, wenn gewünscht.