border-spacing

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 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 aus dem entsprechenden (horizontalen oder vertikalen) border-spacing und dem entsprechenden (oben, rechts, unten oder links) padding der Tabelle ist.

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 ist, definiert er sowohl den horizontalen als auch den vertikalen Abstand zwischen den Zellen.
• Wenn zwei <length>-Werte angegeben sind, definiert der erste Wert den horizontalen Abstand zwischen den Zellen (d. h. den Raum zwischen Zellen in benachbarten Spalten), und der zweite Wert definiert den vertikalen Abstand zwischen den Zellen (d. h. den Raum zwischen Zellen in benachbarten Reihen).

Werte

<length>

Die Größe des Abstands als fester Wert.

Formale Definition

Formale Syntax

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

Beispiele

Abstand 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 an den Außenkanten die padding-Werte der Tabelle zu ihren border-spacing-Werten hinzugefügt 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 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

Browser-Kompatibilität

Siehe auch

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