CSS/Eigenschaften/Tabellenformatierung/border-collapse

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Tabellenformatierung(Weitergeleitet von Border-collapse)
Wechseln zu: Navigation, Suche

Mit der Eigenschaft border-collapse legen Sie fest, ob Rahmen benachbarter Tabellenelemente getrennt (border-collapse: separate;) oder zusammenfallend (border-collapse: collapse;) dargestellt werden.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html> 
  <head> 
    <meta charset="utf-8">
    <title>border-collapse</title>
    <style>
      table, th, td { border: 1px solid; }
      #coll         { border-collapse: collapse; }
      #sepa         { border-collapse: separate; margin-top: 2em; }
      caption       { text-align: left; }
    </style> 
  </head>
  <body>
    <table id="coll">
      <caption>Zusammenfallende Rahmen</caption>
      <tbody>
        <tr>
          <td>Feld 1</td>  
          <td>Feld 2</td>  
          <td>Feld 3</td>  
        </tr>
        <tr>
          <td>Feld 4</td>  
          <td>Feld 5</td>  
          <td>Feld 6</td>  
        </tr>
      </tbody>
    </table>
  
    <table id="sepa">
      <caption>Getrennte Rahmen</caption>
      <tbody>
        <tr>
          <td>Feld 1</td>  
          <td>Feld 2</td>  
          <td>Feld 3</td>  
        </tr>
        <tr>
          <td>Feld 4</td>  
          <td>Feld 5</td>  
          <td>Feld 6</td>  
        </tr>
      </tbody>
    </table>
  </body>
</html>