Hallo
Ich möchte in einer zweispaltigen Tabelle die Spaltenbreiten definieren und über den Spalten eine gemeinsame Überschrift haben. Dazu habe ich folgendes erstellt:
In HTML
<table id="list">
<tr>
<th colspan="2">lalalala</th>
</tr>
<tr>
<td class="left">blabla</td>
<td class="right">lalellulalelu</td>
</tr>
</table>
In CSS
table#list {
border:1px solid;
width: 650px;
table-layout:fixed;
border-collapse:collapse;
}
table#list td.left {
margin:0;
padding:0 5px 0 0;
border:none;
width: 170px;
overflow:hidden;
text-align:right;
line-height:18px;
min-height:24px;
color:#000000;
background-color:#DDDDDD;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
}
table#list td.right {
margin:0;
padding:0 0 0 5px;
line-height:18px;
min-height:24px;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
}
table#list th {
width: auto;
text-align:left;
line-height:18px;
min-height:24px;
color:#FFFFFF;
background-color:#435370;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
}
Leider werden die Spalten hier immer gleichmässig aufgeteilt. Sobald ich das das th Element entferne funkioniert alles wie gewünscht. Wie kann ich diese Tabelle also mit einer (einzigen) Überschrift erstellen? Das Problem tritt im IE8 und FF 3.6.3 auf.