border-spacing CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die border-spacing CSS-Eigenschaft legt den Abstand zwischen den Rändern benachbarter Zellen in einem <table> fest. Diese Eigenschaft gilt nur, wenn border-collapse auf separate gesetzt ist.
Probieren Sie es aus
border-spacing: 0;
border-spacing: 5px;
border-spacing: 5px 1rem;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tbody>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
</tr>
</tbody>
</table>
</section>
table {
width: 15rem;
table-layout: fixed;
}
td {
border: 5px solid;
border-color: crimson dodgerblue;
padding: 0.75rem;
}
Syntax
/* <length> */
border-spacing: 2px;
/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;
/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;
Die border-spacing-Eigenschaft kann entweder mit einem oder zwei Werten angegeben werden.
- Wenn ein
<length>-Wert angegeben wird, definiert er sowohl den horizontalen als auch den vertikalen Abstand zwischen den Zellen. - Wenn zwei
<length>-Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen den Zellen (d.h. den Raum zwischen den Zellen in benachbarten Spalten), und der zweite Wert definiert den vertikalen Abstand zwischen den Zellen (d.h. den Raum zwischen den Zellen in benachbarten Zeilen).
Werte
<length>-
Die Größe des Abstands als fester Wert.
Beschreibung
Der border-spacing-Wert wird auch an der Außenseite der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des entsprechenden (horizontalen oder vertikalen) border-spacing und des entsprechenden (oberen, rechten, unteren oder linken) padding der Tabelle ist.
Hinweis:
Die border-spacing-Eigenschaft entspricht dem veralteten cellspacing-Attribut des <table>-Elements, mit dem Unterschied, dass border-spacing einen optionalen zweiten Wert hat, der zum Festlegen unterschiedlicher horizontaler und vertikaler Abstände verwendet werden kann.
Formale Definition
| Anfangswert | 0 |
|---|---|
| Anwendbar auf | table- und inline-table-Elemente |
| Vererbt | Ja |
| Berechneter Wert | zwei absolute Längen |
| Animationstyp | diskret |
Formale Syntax
border-spacing =
<length>{1,2}
Beispiele
Abstand und Auffüllung von Tabellenzellen
Dieses Beispiel wendet einen vertikalen Abstand von .5em und einen horizontalen Abstand von 1em zwischen den Zellen einer Tabelle an. Beachten Sie, wie an den Außenkanten die padding-Werte der Tabelle zu ihren border-spacing-Werten hinzugefügt werden.
HTML
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
CSS
table {
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 1px solid orange;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Cascading Style Sheets Level 2 # separated-borders |
Browser-Kompatibilität
Siehe auch
border-collapse,border-style- Die
border-spacing-Eigenschaft verändert das Erscheinungsbild des<table>HTML-Elements. - CSS-Tabellenmodul