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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Nach dem Login kopieren

< ;/div>

CSS:
.table {

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.

Das obige ist der detaillierte Inhalt vonWarum funktioniert der Rand bei CSS-Tabellenzellen nicht und wie kann ich stattdessen Abstände hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!