CSS border-collapse Eigenschaft

Die CSS border-collapse Eigenschaft legt fest, ob die Rahmen der Zellen einer Tabelle getrennt bleiben oder zu einem einzigen gemeinsamen Rahmen zusammengefasst werden.

Standardmäßig zeichnet jede Zelle in einem <table> ihren eigenen Rahmen, sodass die Grenze zwischen zwei benachbarten Zellen tatsächlich aus zwei nebeneinanderliegenden Rahmen besteht (zuzüglich eines eventuellen Abstands zwischen ihnen). Dies wirkt oft wie eine dicke, doppelte Linie. Mit der Eigenschaft border-collapse können Sie zwischen diesem klassischen Tabellenkalkulationsaussehen und einem klareren Einzel-Linien-Raster wählen.

separate (der Standardwert) — jede Zelle behält ihre eigenen Rahmen. Der Abstand zwischen benachbarten Zellrahmen wird durch die Eigenschaft border-spacing gesteuert.
collapse — benachbarte Rahmen werden zu einem zusammengefasst. Der Browser wählt den „Gewinner"-Rahmen für jede gemeinsame Kante anhand von Breite, Stil und Farbe, und border-spacing wird ignoriert.

Diese Eigenschaft wirkt sich nur auf <table>- und display: inline-table-Elemente aus und ist einer der wenigen Fälle, in denen Rahmen, die auf einem <table>, seinen Zeilen und seinen Zellen gesetzt sind, miteinander interagieren.

Standardwert	separate
Gilt für	Tabellen- und Inline-Tabellen-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS2
DOM-Syntax	object.style.borderCollapse = "collapse";

Syntax

Syntax der CSS border-collapse Eigenschaft

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

Beispiel der border-collapse Eigenschaft:

Beispiel der CSS border-collapse Eigenschaft mit dem Wert collapse

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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>Border-collapse property example</h2>
    <p>Here the "collapse" value is set for the border-collapse property.</p>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Probier es selbst »

Ergebnis

Im folgenden Beispiel können Sie den Unterschied direkt sehen. Bei border-collapse: separate definiert die Eigenschaft border-spacing den Abstand zwischen den Zellen. Bei border-collapse: collapse hat border-spacing keinen Effekt — die Zellen berühren sich und ihre Rahmen werden zusammengefasst.

Beispiel der border-collapse Eigenschaft mit den Werten "separate" und "collapse":

Beispiel der CSS border-collapse Eigenschaft mit dem Wert separate

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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; /* ignored when border-collapse is collapse */
      }
    </style>
  </head>
  <body>
    <h1>Border-collapse property example</h1>
    <h2>border-collapse: separate;</h2>
    <p>When using the "border-collapse: separate", the border-spacing property can be used to define the space between the cells.</p>
    <table id="table1">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
    <h2>border-collapse: collapse;</h2>
    <p>When using the "border-collapse: collapse", the border-spacing property has no effect.</p>
    <table id="table2">
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung
separate	Jede Zelle hat ihre eigenen Rahmen. Dies ist der Standardwert. Die Eigenschaft border-spacing steuert den Abstand zwischen den Zellen.
collapse	Zellen teilen ihre Rahmen. Benachbarte Rahmen werden zu einem einzigen Rahmen zusammengefasst.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.
unset	Setzt die Eigenschaft auf ihren Ausgangswert zurück.

Wie das Zusammenfassungsmodell funktioniert

Wenn border-collapse: collapse gesetzt ist, kann jede gemeinsame Kante nur einen Rahmen zeichnen, daher muss der Browser Konflikte zwischen den Rahmen auflösen, die auf der Tabelle, der Zeile und den beiden benachbarten Zellen deklariert sind. Die Regeln lauten in dieser Reihenfolge:

Ein Rahmen mit border-style: hidden gewinnt immer und entfernt die Kante vollständig.
Ein breiterer Rahmen gewinnt gegenüber einem schmaleren.
Sind die Breiten gleich, werden die Stile in folgender Reihenfolge bewertet: double > solid > dashed > dotted > ridge > outset > groove > inset.
Sind Breite und Stil immer noch gleich, gewinnt der Rahmen des Elements, das der Zelle am nächsten ist (Zelle vor Zeile vor Tabelle).

Deshalb kann es im zusammengefassten Modus vorkommen, dass das Setzen unterschiedlicher Rahmenbreiten auf <td> und <table> nicht wie erwartet aussieht — es wird nur der Gewinner-Rahmen gezeichnet.

Wann es verwendet werden sollte

Verwenden Sie collapse für die meisten Datentabellen. Es erzeugt das klare Einzel-Linien-Raster, das man von Tabellenkalkulationen erwartet, und ist der einfachste Weg, doppelte Rahmen zu vermeiden.
Behalten Sie separate, wenn Sie sichtbare Abstände zwischen Zellen möchten (setzen Sie border-spacing), abgerundete Zellenecken oder zelleigene Rahmen, die nicht zusammengefasst werden sollen.
Beachten Sie, dass border-radius auf Zellen nur im separate-Modus eine sichtbare Wirkung hat; zusammengefasste Rahmen können nicht abgerundet werden.

Übung

Was macht die Eigenschaft 'border-collapse' in CSS?

Sie definiert den Abstand zwischen den Zellen einer Tabelle.Sie lässt Sie entscheiden, ob die Tabellenrahmen zu einem einzigen Rahmen zusammengefasst oder als separate Rahmen angezeigt werden sollen.Sie passt die Größe der Tabelle an.Sie wird verwendet, um die Farbe der Tabellenrahmen festzulegen.Sie bestimmt den Stil für die vier Rahmen einer Tabellenzelle.