CSS-Eigenschaft border-collapse

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.