Tabellenrahmen überlappen lassen mit CSS
Wenn Sie Rahmen für Tabellenzellen definieren, kommt es vor, dass diese innerhalb der Tabelle doppelt so dick wie gewünscht erscheinen. Dieses Verhalten können Sie mit einem CSS-Befehl leicht verhindern.
Grund für dieses Verhalten ist, dass um jede einzelne Tabellenzelle ein Rahmen mit der angegebenen Stärke gezogen wird und der Rahmen dann innerhalb der Tabelle doppelt so dick erscheint. Wenn Sie diese Eigenschaft nicht gezielt ausnutzen wollen, können Sie mit dem CSS-Befehl border-collapse: collapse; erreichen, dass sich zwei parallele Rahmen überlappen.
<html>
<head>
<style type="text/css">
<!--
TABLE {
border-collapse: collapse;
}
TD {
border: 1px solid black;
}
-->
</style>
<title>Tabellenrahmen überlappen lassen</title>
</head>
<body>
<table cellpadding="5" cellspacing="0">
<tr>
<td>Land</td>
<td>Region</td>
<td>Stadt</td>
</tr>
<tr>
<td>Deutschland</td>
<td>Nordrhein-Westfalen</td>
<td>Rhede</td>
</tr>
<tr>
<td>Australien</td>
<td>Queensland</td>
<td>Brisbane</td>
</tr>
<tr>
<td>Deutschland</td>
<td>Bayern</td>
<td>München</td>
</tr>
</table>
</body>
</html>
Kategorie: CSS
