Tabelle mit Gitterlinien, aber ohne Außenrahmen
Problem
![Tabelle ohne Außenrahmen](assets/media/images/wissen/html_css/tabelle_aussenrahmen_gross.png)
Oft soll eine Tabelle zwar Gitterlinien (Rahmen um die einzelnen Zellen), aber keinen Außenrahmen haben. Umständlich wird dies häufig gelöst, in dem den äußeren Zellen eine eigene Klasse (z. B. .last
) zugewiesen wird.
<table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th class="last">Head 3</th> </tr> </thead> <tbody> <tr> <td>Zelle 1.1</td> <td>Zelle 2.1</td> <td class="last">Zelle 3.1</td> </tr> <tr> <td>Zelle 1.2</td> <td>Zelle 2.2</td> <td class="last">Zelle 3.2</td> </tr> <tr> <td>Zelle 1.3</td> <td>Zelle 2.3</td> <td class="last">Zelle 3.3</td> </tr> <tr class="last"> <td>Zelle 1.4</td> <td>Zelle 2.4</td> <td class="last">Zelle 3.4</td> </tr> </tbody> </table>
Für diese Klassen wird dann im CSS explizit der Rahmen an der Außenseite entfernt.
table { border-collapse: collapse; } td, th { border-bottom: 1px solid blue; border-right: 1px solid blue; } td.last, th.last { border-right: none; } tr.last td { border-bottom: none; }
Lösung
Einfacher und ganz ohne zusätzliche CSS-Klassen geht es wie nachfolgend beschrieben. Das HTML-Markup der Tabelle kommt ohne Extra-Klassen aus.
<table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <tbody> <tr> <td>Zelle 1.1</td> <td>Zelle 2.1</td> <td>Zelle 3.1</td> </tr> <tr> <td>Zelle 1.2</td> <td>Zelle 2.2</td> <td>Zelle 3.2</td> </tr> <tr> <td>Zelle 1.3</td> <td>Zelle 2.3</td> <td>Zelle 3.3</td> </tr> <tr> <td>Zelle 1.4</td> <td>Zelle 2.4</td> <td>Zelle 3.4</td> </tr> </tbody> </table>
Im CSS wird td
und th
der gewünschte, sichtbare border
zugewiesen. table
erhält border-collapse: collapse
und border-style: hidden
. Muss ein alter Internet Explorer unterstützt werden, wird außerdem noch ein Rahmen in der Farbe des Seiten-Hintergrunds hinzugefügt (muss im CSS vor border-style: hidden
notiert werden).
table { border-collapse: collapse; border: 1px solid #ffffff; /* Für IE <= 7; Farbe entspricht Hintergrundfarbe */ border-style: hidden; } td, th { border: 1px solid blue; }