border-spacing
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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 mit entweder 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 Abstand zwischen Zellen in benachbarten Spalten), und der zweite Wert definiert den vertikalen Abstand zwischen den Zellen (d.h. den Abstand zwischen Zellen in benachbarten Reihen).
Werte
<length>-
Die Größe des Abstands als fester Wert.
Beschreibung
Der border-spacing-Wert wird auch entlang der Außenkante der Tabelle verwendet, wobei der Abstand zwischen der Tabellenumrandung und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des relevanten (horizontalen oder vertikalen) border-spacing und des relevanten (oben, rechts, unten oder links) padding auf der Tabelle ist.
Hinweis:
Die border-spacing-Eigenschaft entspricht dem veralteten cellspacing-Attribut des <table> Elements, außer dass border-spacing einen optionalen zweiten Wert hat, der verwendet werden kann, um unterschiedliche horizontale und vertikale Abstände festzulegen.
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
Abstände und Auffüllen von Tabellenzellen
In diesem Beispiel wird ein Abstand von .5em vertikal und 1em horizontal zwischen den Zellen einer Tabelle angewendet. Beachten Sie, wie entlang der Außenkanten der Tabelle die padding-Werte zu den 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
| Specification |
|---|
| Cascading Style Sheets Level 2 # separated-borders |
Browser-Kompatibilität
Siehe auch
border-collapse,border-style- Die
border-spacing-Eigenschaft verändert das Aussehen des<table>HTML-Elements. - CSS Tabelle Modul