CSS-Eigenschaft border-collapse

Die CSS-Eigenschaft border-collapse gibt an, ob Tabellengrenzen gemeinsam genutzt (als ein einzelner Rand) oder komprimiert werden.

Wenn die Zellen zusammengeklappt sind, ist der Wert von border-style "inset", er verhält sich wie "groove", und "outset" verhält sich wie "ridge". Bei der Trennung von Zellen wird der Abstand zwischen den Zellen durch die Eigenschaft border-spacing festgelegt.

Anfangswert separate
Gilt für Tabellen- und Inline-Tabellenelemente.
Geerbt Ja
Animierbar Nein
Version CSS2
DOM Syntax object.style.borderCollapse = "collapse";

Syntax

border-collapse: separate | collapse | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table {
      border-collapse: collapse;
      }
      table, th, td {
      border: 1px solid #cccccc;
      }
      thead {
      background-color: #1c87c9;
      color: #ffffff;
      }
      th {
      height: 50px;
      text-align: center;
      }
      td {
      padding: 3px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft border-collapse</h2>
    <p>Hier ist der Wert "collapse" für die Eigenschaft border-collapse eingestellt.</p>
    <table>
      <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>

Im folgenden Beispiel sehen Sie, dass bei Verwendung von "border-collapse: separate", die Eigenschaft border-collapse den Abstand zwischen den Zellen einstellen kann und bei Verwendung von "border-collapse: collapse", die Eigenschaft border-collapse keine Wirkung hat.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table, td, th {
      border: 1px solid #ccc;
      }
      thead {
      background-color: #1c87c9;
      color: #ffffff;
      }
      th {
      height: 30px;
      text-align: center;
      }
      td {
      padding: 3px 10px;
      }
      #table1 {
      border-collapse: separate;
      border-spacing: 10px;
      }
      #table2 {
      border-collapse: collapse;
      border-spacing: 10px;  
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Border-collapse</h2>
    <h3>border-collapse: separate;</h3>
    <p>Beim Gebrauch von "border-collapse: separate" kann die Eigenschaft border-spacing verwendet werden, um den Abstand zwischen den Zellen zu definieren.</p>
    <table id="table1">
      <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>
    <h3>border-collapse: collapse;</h3>
    <p>Beim Gebrauch von "border-collapse: collapse" hat die Eigenschaft border-spacing keine Wirkung.</p>
    <table id="table2">
      <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>

Werte

Wert Beschreibung
separate Jede Zelle hat ihre eigenen Grenzen, also ist sie getrennt. Das ist der Standardwert dieser Eigenschaft.
collapse Zellen teilen sich ihre Grenzen.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.2+ 4.0+

Übe dein Wissen

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