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

border-spacing: 0;

border-spacing: 5px;

border-spacing: 5px 1rem;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <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>
  </table>
</section>

table {
  width: 15rem;
  table-layout: fixed;
}

td {
  border: 5px solid;
  border-color: crimson dodgerblue;
  padding: 0.75rem;
}

Der border-spacing Wert wird auch entlang des äußeren Randes der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe aus dem relevanten (horizontalen oder vertikalen) border-spacing und dem relevanten (oben, rechts, unten oder links) padding an der Tabelle ist.

Hinweis: Die border-spacing Eigenschaft entspricht dem veralteten cellspacing Attribut des <table> Elements, mit der Ausnahme, 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 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 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 Zeilen).

Werte

<length>: Die Größe des Abstands als fester Wert.

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üllung von Tabellenzellen

Dieses Beispiel wendet einen Abstand von .5em vertikal und 1em horizontal zwischen den Zellen einer Tabelle an. Beachten Sie, wie an den Außenkanten die padding-Werte der Tabelle 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 # separated-borders

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

border-collapse, border-style
Die border-spacing Eigenschaft verändert das Erscheinungsbild des <table> HTML Elements.
CSS table Modul