CSS-Eigenschaft border-spacing

Die CSS-Eigenschaft border-spacing wird verwendet, um den Abstand zwischen den Grenzen benachbarter Tabellenzellen festzulegen. Diese Eigenschaft gilt nur, wenn border-collapse getrennt ist. Wenn das zusammenbrechende Randmodell (collapsing border model) verwendet wird, wird diese Eigenschaft ignoriert.

Die Eigenschaft border-spacing kann mit einem oder zwei Werten length angegeben werden. Wenn zwei Werte angegeben werden, stellt der erste den horizontalen Abstand und der zweite den vertikalen Abstand ein. Wenn nur ein Wert angegeben wird, setzt er sowohl den horizontalen als auch den vertikalen Abstand auf den angegebenen Wert. Negative Werte sind nicht erlaubt.

Anfangswert 0
Gilt für Table und inline Table-Elemente.
Geerbt Nein
Animierbar Ja. Der Abstandsbetrag ist animierbar.
Version CSS2
DOM Syntax object.style.borderSpacing = "10px";

Syntax

border-spacing: length | initial | inherit;

Hier betrachten wir ein Beispiel mit einem Wert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Vorname</th>
        <th>Nachname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Hier ist ein weiteres Beispiel mit zwei Werten. Der erste Wert legt den horizontalen Abstand fest, der zweite den vertikalen Abstand.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>  
      table {
      border-spacing: 20px 30px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Überschrift</th>
          <th>Überschrift</th>
          <th>Überschrift</th>
          <th>Überschrift</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Text</td>
          <td>Text</td>
          <td>Text</td>
          <td>Text</td>
        </tr>
        <tr>
          <td>Text</td>
          <td>Text</td>
          <td>Text</td>
          <td>Text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

In diesem Beispiel haben wir nun der Tabelle ein wenig Stil gegeben. Zum Beispiel, fügen wir die Hintergrundfarbe hinzu. Die Hintergrundfarbe setzt die Hintergrundfarbe eines Elements.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table, td, th {
      border: 1px solid black;
      }
      .table {
      border-collapse: separate;
      border-spacing: 20px;
      background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für border-spacing: 20px;</h2>
    <table class="table">
      <tr>
        <th>Vorname</th>
        <th>Nachname</th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Peterson</td>
      </tr>
      <tr>
        <td>Maxim</td>
        <td>Brown</td>
      </tr>
    </table>
  </body>
</html>

Werte

Wert Beschreibung
length Es gibt den Abstand zwischen den Zellen in px, em oder % an.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'border-spacing'?
Finden Sie das nützlich?