CSS-Eigenschaft border-spacing

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.