Tabelle mit Gitterlinien, aber ohne Außenrahmen
Problem
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;
}