Hallo,
vermutlich ein bekannter FF-Bug, mir bisher jedoch noch nicht bekannt.
Folgendes Szenario:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
table { width: 100%; margin-bottom: 1em; border-collapse: collapse; }
thead th { border: 1px solid #90B4D8; padding: 3px; background-color: #C7D9EC; font-weight: bold; text-align: left; }
tbody td { border: 1px solid #90B4D8; padding: 3px; vertical-align: top; }
.name { width: 200px; }
.colA, .colB { width: 200px; }
.colAB { width: 407px; }
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th colspan="4">Tiere</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">Wolf</td>
<td>Der Wolf (Canis lupus) ist eine Raubtierart ...</td>
<td class="colA">200px</td>
<td class="colB">200px</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<thead>
<tr>
<th colspan="4">Haushaltsgeräte</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">Bügeleisen</td>
<td>Ein Bügeleisen ist ein Gerät zum Glätten ...</td>
<td colspan="2" class="colAB">407px (2x 200px + 2x 3px padding + 1px border)</td>
</tr>
</tbody>
</table>
</body>
</html>
Der FF zeigt in der 2. Tabelle die rechte Spalte zu breit (oder je nach Browserbreite zu schmal) an. Ändert sich der Inhalt in der 2. Spalte, ändert sich auch die Breite der eigentlich fixen 3. Spalte.
Zusätzlich noch max-width: 407px; zu schreiben hat keine Auswirkung.
Man könnte die head-Zeile so aufteilen:
<th colspan="2">Haushaltsgeräte</th>
<th class="colA"> </th>
<th class="colB"> </th>
Das class="colAB" wäre dann überflüssig.
Jedoch habe ich dann senkrechte border-Striche die dort nicht sein sollen. Um die dann wegzubekommen, muß ich wieder extra Klassen definieren die border-left bzw. border-right auf 0 setzen - würde ich mir eigentlich gern sparen.
Kennt jemand einen einfachen Workaround?
Danke und Gruß