|
|||
Zellenbreite stimmt nicht trotz table-layout:fixed
Hallo!
Egal wie ich es drehe oder wende, mir will es einfach nicht gelingen, Zellen in der exakt vorgegebenen Breite zu darzustellen. Weise ich allen Zellen die exakte Breite zu, stimmt die Gesamtbreite nicht. Lasse ich bei einem Feld die Breitenangabe weg, stimmt zwar die Gesamtbreite, aber der Rest nicht. Erschwerend kommt hinzu, dass sich die Zellenbreiten durch Padding noch weiter verschieben. Doch selbst wenn ich es weglasse, stimmt es nicht. Lediglich Chrome/-ium scheint es richtig darzustellen. Firefox und Opera scheitern (IE kann ich nicht testen). Was mache ich falsch bzw. wie lässt sich das Problem lösen? Hier die Beispielseite: http://db.tt/aW9PdUE Hier der Code: HTML-Code:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> <!-- body { font-family: arial, helvetica, sans-serif; font-size: 0.9em; } table { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #AAAAAA; border-collapse: collapse; empty-cells: show; width: 800px; } th { background: #F2F2F2; border: 1px solid #AAAAAA; padding: 0.2em; } .infobox { height: 40px; width: 800px; margin: 20px 0px 5px; text-align:center; } .green { background: lightgreen; } .red { background: lightpink; } .fixed { table-layout: fixed; } .w40 { width: 40px; } .w100 { width: 100px; } .w120 { height: 20px; width: 120px; } .w260 { width: 260px; } --> </style> </head> <body> <div class="infobox green">Referenzbox mit width:800px<br />Zellen- und Tabellenbreite wird nach Vorgaben eingehalten</div> <img src="tablelayoutfixed.png" width="801" height="26" alt="" /> <div class="infobox red">Erstes Beispiel:<br />Standardtabelle ohne table-layout:fixed</div> <table> <thead> <tr> <th class="w120">120px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w100">100px</th> <th class="w260">260px</th> </tr> </thead> </table> <div class="infobox red">Zweites Beispiel:<br />Wie zuvor, jedoch mit table-layout:fixed</div> <table class="fixed"> <thead> <tr> <th class="w120">120px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w100">100px</th> <th class="w260">260px</th> </tr> </thead> </table> <div class="infobox red">Drittes Beispiel:<br />Ebenfalls mit table-layout:fixed – Der letzten Zelle wurde keine Breite zugewiesen</div> <table class="fixed"> <thead> <tr> <th class="w120">120px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w40">40px</th> <th class="w100">100px</th> <th>—</th> </tr> </thead> <tbody> </tbody> </table> </body> </html> Geändert von -x- (25.05.2011 um 11:55 Uhr) Grund: Schreibfehler beseitigt; Referenz korrigiert |
Sponsored Links |
Sponsored Links |
|
|||
Vielleicht solltest du dir den Code erst einmal anschauen?
PS: Die Innenabstände und Breiten wurden mittlerweile angepasst. Bei Firefox und Opera passt es jetzt. Dafür hat nun Chromium bei table-layout:fixed Probleme. IE kann ich nicht testen. Geändert von -x- (25.05.2011 um 21:42 Uhr) |
|
||||
Das rot makierte war heute morgen noch nicht in dem online-Beispiel, oder?
Code:
table { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #AAAAAA; border-collapse: collapse; empty-cells: show; width: 800px; }
__________________
MfG Jens |
|
|||
Der Code von heute morgen steht doch oben. Es wurden lediglich für die Zellen die eben genannten Angaben angepasst.
Geändert von -x- (25.05.2011 um 22:11 Uhr) |
|
||||
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
hi.
wrapper um die Tabellen, u. der table die weite entnehmen. Code:
} wrapper { width: 800px; } table { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #AAAAAA; border-collapse: collapse; empty-cells: show; } HTML-Code:
<th>-</th>]<th class="w260"></th> |
|
||||
So in etwa, habe ich das heute Morgen gesehen.
table-layout:fixed macht ohne width für table aber keinen Sinn. Edit: Scheppertreiber hat td in thead gesehen. Wir wissen nicht was Ansage ist.
__________________
MfG Jens Geändert von plastiko (26.05.2011 um 00:10 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Myspace Fehler zwischen FF und IE? | soren.designs | (X)HTML | 1 | 05.09.2009 17:02 |
Myspace problem... Rechte Säule verschiebt sich im IE. | calledmarcel | CSS | 1 | 27.02.2009 10:12 |
Myspace-Probleme | Nora-B | CSS | 3 | 16.09.2008 00:17 |
Falsche Darstellung im Internet Explorer | Janizzle | CSS | 0 | 30.08.2007 20:44 |