Breitenangabe bei Tabellenspalten durch colspan verhindert
scuzzlebud
- css
Hallo,
in einer Tabelle nutze ich das colspan HTML Attribut, um 3 Spalten in der ersten Tabellenzeile zu verknüpfen. In der zweiten Zeile darunter stelle ich die drei Spalten einzeln dar. Direkt darüber liegt die große Spalte, welche sich mit colspan über die 3 Spalten erstreckt.
<table border="1" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed; border-collapse:collapse; border-color:#ffffff; border-style:solid;">
<tr bgcolor="#cccccc">
<td align="left" valign="top" style="width:12%;"> </td>
<td align="left" valign="top" style="width:200px;" colspan="3">
</td>
<td align="left" valign="top" style="width:530px;"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr bgcolor="#efefef">
<td align="left" valign="top" style="width:12%;"> </td>
<td align="left" valign="top" style="width:30px;"> </td>
<td align="left" valign="top" style="width:10px;"> </td>
<td align="left" valign="top" style="width:160px;"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top" colspan="2"> </td>
</tr>
<tr bgcolor="#cccccc">
<td align="left" valign="top" colspan="7"> </td>
</tr>
</table>
Es handelt sich jeweils um Spalte 2, 3 und 4.
Wie man sieht habe ich für die colspan-Spalte eine Größe von 200 Pixel definiert. Nun habe ich jedoch das Problem, dass die Breite der drei Spalten in den Folgezeilen nicht mehr frei definiert werden kann - die Breite wird gleichmäßig auf die 200 Pixel aufgeteilt. Wie man im Code sieht möchte ich jedoch Spalte 3 auf 10 Pixel setzen.
Ich dachte, ich kann die Breite immernoch bestimmen solange die Breite der 3 Spalten insgesamt die Summe von 200 Pixel ergeben, da habe ich mich aber geirrt.
Die Darstellung in FireFox und IE ist genau gleich, laut TIDY ist der Code valide.
Erkennt jemand das Problem?
Dankeschön!
Hallo,
<table border="1" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed; border-collapse:collapse; border-color:#ffffff; border-style:solid;">
<tr bgcolor="#cccccc">
<td align="left" valign="top" style="width:12%;"> </td>
<td align="left" valign="top" style="width:200px;" colspan="3">
</td>
<td align="left" valign="top" style="width:530px;"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top"> </td>
</tr>
<tr bgcolor="#efefef">
<td align="left" valign="top" style="width:12%;"> </td>
<td align="left" valign="top" style="width:30px;"> </td>
<td align="left" valign="top" style="width:10px;"> </td>
<td align="left" valign="top" style="width:160px;"> </td>
<td align="left" valign="top"> </td>
<td align="left" valign="top" colspan="2"> </td>
</tr>
<tr bgcolor="#cccccc">
<td align="left" valign="top" colspan="7"> </td>
</tr>
</table>Es handelt sich jeweils um Spalte 2, 3 und 4.
Wie man sieht habe ich für die colspan-Spalte eine Größe von 200 Pixel definiert. Nun habe ich jedoch das Problem, dass die Breite der drei Spalten in den Folgezeilen nicht mehr frei definiert werden kann - die Breite wird gleichmäßig auf die 200 Pixel aufgeteilt. Wie man im Code sieht möchte ich jedoch Spalte 3 auf 10 Pixel setzen.
Es handelt sich um Spalten, also definiere doch auch Spalten. Nimm alle style="width:.."-Angaben aus den Zellen raus und definiere Spaltenbreiten:
<colgroup><col style="width:12%;"><col style="width:30px;"><col style="width:10px;"><col style="width:160px;"><col style="width:530px;"><col><col></colgroup>
Wobei die Spalten1, 6 und 7 dann natürlich bei geringen Fensterbreiten verschwinden. Wenn dort Zellen mit Inhalt drin stehen, solltest Du für diese Zellen auch noch overflow:hidden; vereinbaren.
viele Grüße
Axel