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 des äußeren Randes der Tabelle verwendet, wobei der Abstand zwischen dem Tabellenrand und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des entsprechenden (horizontalen oder vertikalen) border-spacing und des entsprechenden (oben, rechts, unten oder links) padding auf 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 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 den Zellen (d.h. der Abstand zwischen Zellen in benachbarten Spalten), und der zweite Wert definiert den vertikalen Abstand zwischen den Zellen (d.h. der Abstand 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

Abstände und Polsterung von Tabellenzellen

Dieses Beispiel wendet einen Abstand von .5em vertikal und 1em horizontal zwischen den Zellen einer Tabelle an. Beachten Sie, wie an den äußeren Rändern die padding Werte der Tabelle zu ihren border-spacing Werten 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 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 Tabelle Modul