CSS border-collapse-Eigenschaft

Die CSS border-collapse-Eigenschaft definiert, ob Tabellengrenzen getrennt oder zu einer einzigen Grenze zusammengefasst werden.

Wenn Zellen zusammengefasst sind, verschmelzen benachbarte Grenzen zu einer einzigen Grenze. Wenn Zellen getrennt sind, wird der Abstand zwischen ihnen durch die border-spacing-Eigenschaft festgelegt.

Anfangswert	separate
Gilt für	Table- und inline-table-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS2
DOM-Syntax	object.style.borderCollapse = "collapse";

Syntax

Syntax der CSS border-collapse-Eigenschaft

css

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

Beispiel für die border-collapse-Eigenschaft:

Beispiel für die CSS border-collapse-Eigenschaft mit dem Wert collapse

html

<!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>

Try it Yourself »

Ergebnis

Im folgenden Beispiel können Sie sehen, dass bei Verwendung von border-collapse: separate die Eigenschaft border-spacing den Abstand zwischen den Zellen definiert. Bei Verwendung von border-collapse: collapse hat border-spacing keine Auswirkung.

Beispiel für die border-collapse-Eigenschaft mit den Werten "separate" und "collapse":

Beispiel für die CSS border-collapse-Eigenschaft mit dem Wert separate

html

<!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;
      }
    </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>

Try it Yourself »

Werte

Wert	Beschreibung
separate	Jede Zelle hat ihre eigenen Grenzen. Dies ist der Standardwert. Die border-spacing-Eigenschaft steuert den Abstand zwischen den Zellen.
collapse	Zellen teilen sich ihre Grenzen. Benachbarte Grenzen verschmelzen zu einer einzigen Grenze.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.
unset	Setzt die Eigenschaft auf ihren Anfangswert zurück.

Practice

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

Sie definiert den Abstand zwischen den Zellen in einer Tabelle.Sie ermöglicht es Ihnen zu entscheiden, ob die Tabellengrenzen zu einer einzigen Grenze zusammengefasst werden oder als separate Grenzen angezeigt werden sollen.Sie passt die Größe der Tabelle an.Sie wird verwendet, um die Farbe der Tabellengrenzen festzulegen.Sie bestimmt den Stil für die vier Grenzen einer Tabellenzelle.

CSS border-collapse-Eigenschaft ​

Syntax ​

Beispiel für die border-collapse-Eigenschaft: ​

Ergebnis ​

Beispiel für die border-collapse-Eigenschaft mit den Werten "separate" und "collapse": ​

Werte ​