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

Der Wert von border-spacing wird auch am äußeren Rand 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 der entsprechenden (oberen, rechten, unteren oder linken) padding 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.

Syntax

css
/* <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 dieser 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 den Zellen in benachbarten Spalten), und der zweite Wert definiert den vertikalen Abstand zwischen den Zellen (d.h., den Abstand zwischen den Zellen in benachbarten Zeilen).

Werte

<length>

Die Größe des Abstands als fester Wert.

Formale Definition

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

Formale Syntax

border-spacing = 
  <length>{1,2}

Beispiele

Abstand und Polsterung von Tabellenzellen

Dieses Beispiel wendet einen Abstand von .5em vertikal und 1em horizontal zwischen den Zellen einer Tabelle an. Beachten Sie, wie am äußeren Rand der Tabelle die padding-Werte zu den border-spacing Werten hinzugefügt werden.

HTML

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

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 Revision 2 (CSS 2.2) Specification
# separated-borders

Browser-Kompatibilität

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Siehe auch