Spaltenbreiten via COL behagt sich mit TD-Paddings

[Matschek]

Hallo,

folgendes kleines Tabellenkonstrukt bekomme ich nicht Cross-Browser ready. Ich habe mir das im Standards-Mode mit IE7+ und FF3.5 angesehen.
Codeausschnitt:

td {  
	padding: 20px;  
	border: 1px solid black;  
}

~~~html
<table>  
	<colgroup>  
		<col style="width: 100px;"/>  
		<col style="width: 100px;"/>  
		<col style="width: 100px;"/>  
	</colgroup>  
	<tr>  
		<td>1</td>  
		<td>2</td>  
		<td>3</td>  
	</tr>  
</table>

Das Resultat ist eine unterschiedliche effektive Spaltenbreite.
Der Fuchs sieht die Sache wohl so, dass die Spalte fix 100px ist, und platziert darin die TDs mit 20px Padding, damit stehen 60px für den Inhalt zur Verfügung.
Der IE hingegen "argumentiert" wohl, dass die in der COL definierte Breite als Breite der TD durchvererbt wird (gem. CSS natürlich nicht wirklich geerbt). Der Folgeschluss ist dann, dass die Gesamtbreite der TDs die 100px plus Padding ist. Damit stehen 100px für den Inhalt zur Verfügung, und die Spalten sind effektiv 140px breit.

Wie bekomm' ich das unter ein Dach?

Gruß,
Matschek

[Gernot Back]

Hallo Matschek,

Das Resultat ist eine unterschiedliche effektive Spaltenbreite.
Der Fuchs sieht die Sache wohl so, dass die Spalte fix 100px ist, und platziert darin die TDs mit 20px Padding, damit stehen 60px für den Inhalt zur Verfügung.
Der IE hingegen "argumentiert" wohl, dass die in der COL definierte Breite als Breite der TD durchvererbt wird (gem. CSS natürlich nicht wirklich geerbt). Der Folgeschluss ist dann, dass die Gesamtbreite der TDs die 100px plus Padding ist. Damit stehen 100px für den Inhalt zur Verfügung, und die Spalten sind effektiv 140px breit.

So etwas hängt natürlich auch vom verwendeten DOCTYPE ab.

Ich gebe Tabellen meist über CSS eine Gesamtbreite und lasse eine Spalte (COL-Element) als Puffer in der Breite undefiniert, vor allem dann, wenn ich der Tabelle table-layout:fixed verpasse. Damit Fahre ich meist ganz gut. Wenn ich Wert darauf lege, dass alle Spalten in IE und Firefox gleich ticken arbeite ich mit dem Nächsten-Geschwister-Selektor, den IE6 und IE7 ja nicht verstehen und die sich dann weiterhin nach den Abgaben der weniger mächtigen COL-Elemente richten, kann man es so differenzieren:

z.B.:

col.second { width:80px; }  
th:first-child + td { width:60px }

Gruß Gernot

[Matschek]

Ich gebe Tabellen meist über CSS eine Gesamtbreite und lasse eine Spalte (COL-Element) als Puffer in der Breite undefiniert, vor allem dann, wenn ich der Tabelle table-layout:fixed verpasse. Damit Fahre ich meist ganz gut. Wenn ich Wert darauf lege, dass alle Spalten in IE und Firefox gleich ticken arbeite ich mit dem Nächsten-Geschwister-Selektor, den IE6 und IE7 ja nicht verstehen und die sich dann weiterhin nach den Abgaben der weniger mächtigen COL-Elemente richten, kann man es so differenzieren:

z.B.:

col.second { width:80px; }

th:first-child + td { width:60px }

>   
>   
> Gruß Gernot  
  
Hallo Gernot,  
  
für die konkrete Aufgabenstellung ist mir das schon zu viel Aufwand und Workaround, aber generell ist das eine interessante Möglichkeit das zu differenzieren. Daher dennoch Danke für den Tipp!  
  
Gruß,  
Matschek

[Beat]

Der Fuchs sieht die Sache wohl so, dass die Spalte fix 100px ist, und platziert darin die TDs mit 20px Padding, damit stehen 60px für den Inhalt zur Verfügung.
Der IE hingegen "argumentiert" wohl, dass die in der COL definierte Breite als Breite der TD durchvererbt wird (gem. CSS natürlich nicht wirklich geerbt). Der Folgeschluss ist dann, dass die Gesamtbreite der TDs die 100px plus Padding ist. Damit stehen 100px für den Inhalt zur Verfügung, und die Spalten sind effektiv 140px breit.

Wie bekomm' ich das unter ein Dach?

Vermeide den Quirksmode.

• richtigen DOCTYPE (strict oder transitional mit Adresse)
• valider Code

mfg Beat

[Gernot Back]

Hallo Beat,

Vermeide den Quirksmode.

• richtigen DOCTYPE (strict oder transitional mit Adresse)
• valider Code

meine Erfahrung ist, dass man es bei Tabellen je nach Browser und tatsächlich gewähltem validem(!) DOCTYPE dennoch häufig mit einer Art Box-Model-Bug zu tun hat.

Gruß Gernot

[Matschek]

Halle Beat,

Vermeide den Quirksmode.

Das tue ich. Daher schrieb ich "Ich habe mir das *im Standards-Mode* mit IE7+ und FF3.5 angesehen."
Im Quirks-Mode verhält sich die Sache noch mal anders als ich beschrieben habe.

Gruß,
Matschek

[Beat]

Vermeide den Quirksmode.
Das tue ich. Daher schrieb ich "Ich habe mir das *im Standards-Mode* mit IE7+ und FF3.5 angesehen."
Im Quirks-Mode verhält sich die Sache noch mal anders als ich beschrieben habe.

Na dann würde ich ausnahmsweise Klassen auf die Cols anwenden und im CSS halt für MSIE anders definieren:
col.collwidth_1{ width: 100px; }
*+html col.collwidth_1{ width: 60px; }

mfg Beat

[Vinzenz Mai]

Hallo,

td {

padding: 20px;
border: 1px solid black;
}

> ~~~  
> ~~~html

<table>  

> 	<colgroup>  
> 		<col style="width: 100px;"/>  
> 		<col style="width: 100px;"/>  
> 		<col style="width: 100px;"/>  
> 	</colgroup>  
> 	<tr>  
> 		<td>1</td>  
> 		<td>2</td>  
> 		<td>3</td>  
> 	</tr>  
> </table>

Das Resultat ist eine unterschiedliche effektive Spaltenbreite.
Wie bekomm' ich das unter ein Dach?

Mit

[ref:self812;css/eigenschaften/tabellen.htm#table_layout@title=table-layout]: fixed;

das Gernot bereits angesprochen hat, und einer Breitenangabe für die Tabelle bekommt man browserübergreifend sehr zuverlässige Spaltenbreiten. Wie sagt die Spezifikation so schön:

<zitat>
    User agents may use any algorithm they wish to do so, and are free to
    prefer rendering speed over precision, except when the "fixed layout
    algorithm" is selected.
</zitat>

Freundliche Grüße

Vinzenz

[Matschek]

Mit

[ref:self812;css/eigenschaften/tabellen.htm#table_layout@title=table-layout]: fixed;

das Gernot bereits angesprochen hat, und einer Breitenangabe für die Tabelle bekommt man browserübergreifend sehr zuverlässige Spaltenbreiten. Wie sagt die Spezifikation so schön:

<zitat>
    User agents may use any algorithm they wish to do so, and are free to
    prefer rendering speed over precision, except when the "fixed layout
    algorithm" is selected.
</zitat>

Freundliche Grüße

Vinzenz

Ein table-layout:fixed ändert an dem Verhalten leider auch nichts, dass hatte ich ursprünglich mal drin und beim Debugging wegrationalisiert. Ob mit oder ohne diese Eigenschaft, oder mit oder ohne einer Gesamtbreite der Tabelle, mit der Definition über die COLs komm ich nicht weiter sobald ein Padding mit im Spiel ist...
Tja, da werde ich wohl wieder zurück auf die alte Art gehen und doch an der ersten TD bzw. TH die Breiten einzeln definieren müssen. Das klappt dann zumindest auch ohne CSS-Hack für die beiden Main-Browser.

Besten Dank an alle für die Vorschläge!

Gruß,
Matschek