Tabelle mit unterschiedlicher Spaltenbreite

Gewünschte Darstellung (Screenshot)

1. Beispiel - verbundene Zellen

AAA 200px	BBBBBBB 400px
CCCCCCC 400px		DDD 200px

2. Beispiel - verbundene Zellen und (an sich überflüssige) dritte Zeile

2. a) Rahmen der Zusatzzellen mit `border-style:hidden` ausgeblendet:

AAA 200px	BBBBBBB 400px
CCCCCCC 400px		DDD 200px

2. b) Rahmen und Hintergrund der Zusatzzellen zu Demonstrationszwecken farbig:

AAA 200px	BBBBBBB 400px
CCCCCCC 400px		DDD 200px

2. c) Hintergrund der Zusatzzellen farbig; Rahmen der Zusatzzellen ausgeblendet:

AAA 200px	BBBBBBB 400px
CCCCCCC 400px		DDD 200px

3. Beispiel - verbundene Zellen, `colgroup` und `<col width="200">`

AAA 200px	BBBBBBB 400px
CCCCCCC 400px		DDD 200px

4. Beispiel - verbundene Zellen, `<colgroup width="200" span="3">`

AAA 200px	BBBBBBB 400px
CCCCCCC 400px		DDD 200px

5. Beispiel - verbundene Zellen, `colgroup` und zentrales CSS für `col`

AAA 200px	BBBBBBB 400px
CCCCCCC 400px		DDD 200px

6. Beispiel - 2 unabhängige Tabellen, die "aneinander kleben"

AAA 200px

BBBBBBB 400px

CCCCCCC 400px

DDD 200px

Resultate (Windows-Browser)

Beispiel Nr.	MS IE 8.0 Firefox 3.6.3	MS IE 5.5 - 7.0 Opera 10.51	Safari 4.0
1. Beispiel	falsch (alle Zellen ca. 400px breit)	falsch (alle Zellen ca. 400px breit)	falsch (breite Zellen 600px breit)
2. Beispiel	OK	OK *	OK
3. Beispiel	OK	falsch (alle Zellen 400px breit)	OK
4. Beispiel	OK	falsch (alle Zellen 400px breit)	falsch (breite Zellen 600px breit)
5. Beispiel	OK	falsch (alle Zellen 400px breit)	OK
6. Beispiel	OK	OK	OK

*) Beim Beispiel 2a) zeigen MS IE 6.0 und 7.0 unten einen 2px breiten schwarzen Rahmen.
Beim Beispiel 2c) zeigen MS IE 5.5, 6.0 und 7.0 unten einen 1px breiten schwarzen Rahmen und unmittelbar daran anschliessend den 3px dicken grünen Rahmen rund um die Tabelle.