border-spacing

Die border-spacing Eigenschaft legt die Abstände zwischen Tabellenzellen fest.
Die Eigenschaft hat nur dann Auswirkungen, wenn border-collapse: separate definiert ist.

Der Wert für border-spacing wird auch entlang der Außenkante der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des relevanten Randabstands (horizontalen oder vertikalen) border-spacing und des relevanten (oben, rechts, unten oder links) padding in der Tabelle ist.

value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

Hinweis: Die border-spacing Eigenschaft entspricht demveraltetem <table> Attribut  cellspacing, mit der Ausnahme, dass es einen optionalen zweiten Wert hat, mit dem unterschiedliche horizontale und vertikale Abstände eingestellt werden können.

Syntax

/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

/* Global values */
border-spacing: inherit;
border-spacing: initial;

Die Eigenschaft border-spacing kann entweder als ein oder zwei Werte angegeben werden.

  • Wenn ein <length> Wert angegeben wird, definiert er sowohl die horizontalen als auch die vertikalen Abstände zwischen den Zellen.
  • Wenn zwei <length> Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Spalten) und der zweite Wert den vertikalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Zeilen).

Werte

<length>
Die Größe des Abstands als fester Wert.
<initial>
Setzt den Standardwert für diese Eigenschaft
<inherit>
Diese Eigenschaft erbt den Wert von seinem Elternelement.

Formale Definition

Initialwert0
Anwendbar auftable- und inline-table-Elemente
VererbtJa
Berechneter Wertzwei absolute Längen
Animationstypdiskret

Formale Syntax

<length> <length>?

Beispiele

Abstände und Padding von Tabellenzellen

In diesem Beispiel wird ein Abstand von .5em vertikal und 1em horizontal zwischen den Zellen einer Tabelle angewendet. Beachten Sie, wie die padding Werte der Tabelle entlang ihrer Außenkanten zu ihren Randabstandswerten border-spacing addiert werden.

HTML

<table>
  <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>
</table>

CSS

table {
  border-spacing: 1em .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 Status Kommentar
CSS Level 2 (Revision 1)
Die Definition von 'border-spacing' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser-Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
border-spacingChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 14Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Siehe auch