nicht angemeldet
Hallo SelfHTML-er!
Angeregt durch ein heutiges Posting (http://forum.de.selfhtml.org/?m=116194&t=20759) habe ich versucht, das Problem der festen Breitenangaben von Tabellen und Tabellenzellen etwas genauer zu beleuchten.
Das Problem:
Wenn der Inhalt einer Tabellenzelle breiter ist, als die Zelle und kein Zeilenmbruch möglich ist, wird die Zelle und unter Umständen die Tabelle automatisch breiter. Das kann aber dem Wunsch nach präzisem Layout - ohne dies an sich bewerten zu wollen - entgegenstehen.
Ich habe das Forum-Archiv von 1999 bis heute durchsucht und festgestellt, dass hierzu nur zum Teil befriedigende Lösungen gefunden wurden, die in keinem Fall für einen anderen Browser als den IE funktionieren. Mir ist es immerhin gelungen, auch für Mozilla, und damit für NS6+ eine Lösung herauszuarbeiten (siehe 3. Lösung).
Lösungen:
1. Man verwendet keine Tabellen. Sicherlich die naheliegendeste und gebräuchlichste Methode: für pixelgenaues Design bieten sich in der Regel <div>-Elemente an.
2. CSS-Lösung wie in SelfHTML:
http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm#table_layout
Damit wird der überschüssige Rest einer Zelle einfach "gnadenlos" abgeschnitten. Dies ist aber der gewünschte Effekt: Die Breitenangaben sollen Vorrang haben.
<table border="1" style="table-layout:fixed">
<colgroup span="3" style=""></colgroup>
<tr>
<td style="width:100px">123456789012345678901234567890123456789012345678901234567890</td>
<td style="width:200px">123456789012345678901234567890123456789012345678901234567890</td>
<td style="width:300px">123456789012345678901234567890123456789012345678901234567890</td>
</tr>
</table>
Entscheidend ist hier neben den width-Angaben der Zellen das "table-layout:fixed" im table-tag. Aber, wie in diesem SelfHTML-Abschnitt weiter unten angemerkt wird: "Netscape 6.x interpretiert diese Eigenschaft wohl, hatte aber Probleme bei der Darstellung. Eine width-Zuweisung an das table-Element brachte ihn dazu, die Anzeige zu verhauen, und das obige Beispiel mit der width-Zuweisung an einzelne Zellen, um damit die Breite der Tabelle festzulegen, ignorierte er."
...so ist es: das funktioniert nur im IE.
3. CSS-Lösung für IE _und_ Mozilla:
Mozilla/NS6+ akzeptieren obige Lösung nur, wenn ein paar Modifikationen vorgenommen werden:
<table border="1" style="table-layout:fixed;width:602px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100px;overflow:hidden;">123456789012345678901234567890123456789012345678901234567890</td>
<td style="width:200px;overflow:hidden;">123456789012345678901234567890123456789012345678901234567890</td>
<td style="width:300px;;overflow:hidden;">123456789012345678901234567890123456789012345678901234567890</td>
</tr>
</table>
Jede Zelle braucht die style-Angabe "overflow:hidden" zusätzlich zur width-Angabe. Darüber hinaus muss im table-tag die Gesamtbreite des Tables angegeben werden - oder einfach ein Wert der kleiner ist als die Gesamtbreite. "1px" funktioniert also immer. Wenn man aber die gesamte Tabelle auf eine exakte Breite trimmen will, sollte man wissen, wie sich ihre volle Ausdehnung zusammensetzt:
Gesamtbreite = (Summe aller Zellenbreiten)px + (Summe aller cellspacings)px + (border-Wert*2)px
Summe aller Zellen: selbsterklärend, im obigen Beispiel 100+200+300=600 Pixel.
Summe aller spacings: Hier gilt die maximale Anzahl der Spacings, falls man Gebrauch von "colspan" gemacht hat. Beispiel:bei einer Tabelle mit 3 Zellen in einer Zeile gibt es 4 spacings. Angenommen, das cellspacing beträgt 2 pixel, bedeutet das, die Gesamtbreite der Tabelle wächst um 4 mal 2 = 8Pixel.
Border-Wert mal zwei: da der Borderwert ja auf der linken und rechten Seite anfällt.
Man sollte im Prinzip immer die richtige Gesamtbreite im table-tag angeben, und nicht mit einem kleineren Wert "zaubern".
Übrigens schneiden IE und Mozilla so nicht nur überstehende Zeichenfolgen ab, sondern auch Bilder.
Diese Lösung habe ich so noch nirgends gesehen, und ich denke, sie ist ein Fortschritt gegenüber der Lösung Nr.2. Allerdings funktioniert sie nicht im Opera und schon gar nicht im NS4.
Nach wie vor gilt natürlich, dass für pixelgenaues Design andere Elemente wie <div> bevorzugt weden sollten. Aber auch das <table>-Element mit exakten Maßen kann für bestimmte Anforderungen seine Berechtigung haben.
Über Kommentare, Verbesserungsvorschläge und Anregungen würde ich mich freuen!
Grüße, Inzaire
ps: Ich wusste nicht, ob ich dieses Thema zu HTML, CSS oder Browser stecken soll - habe einfach mal CSS genommen.