zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Zellenbreite stimmt nicht trotz table-layout:fixed

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.05.2011, 08:35
-x- -x- ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.03.2011
Beiträge: 4
-x- befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.05.2011, 20:53
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

thead und tbody sind etwas zickig. In thead gehören th und keine td.
Soll die Tabelle präzise werden hilft mW nur, in jedes td eine div mit fixer
Breite und overflow:irgendwas einzusetzen. Dann paßt das eigentlich.

Natürlich nicht bei allen Browsern aber brauchbar.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.05.2011, 21:02
-x- -x- ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.03.2011
Beiträge: 4
-x- befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Scheppertreiber Beitrag anzeigen
In thead gehören th und keine td.
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)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.05.2011, 22:03
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 25.05.2011, 22:09
-x- -x- ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.03.2011
Beiträge: 4
-x- befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von plastiko Beitrag anzeigen
Das rot makierte war heute morgen noch nicht in dem online-Beispiel, oder?
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)
Mit Zitat antworten
  #6 (permalink)  
Alt 25.05.2011, 22:21
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Klar. Was ich geschrieben hatte auch. So nicht. Ich schaue lieber Fußball.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #7 (permalink)  
Alt 25.05.2011, 22:30
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von -x- Beitrag anzeigen
IE kann ich nicht testen.
Wieso denn das net? :P
__________________
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?
Mit Zitat antworten
  #8 (permalink)  
Alt 25.05.2011, 23:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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;  
}
bei
HTML-Code:
<th>-</th>]<th class="w260"></th>
Gruß Roland
Mit Zitat antworten
  #9 (permalink)  
Alt 26.05.2011, 00:00
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
...
wrapper um die Tabellen, u. der table die weite entnehmen.
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)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.05.2011, 01:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
table-layout:fixed macht ohne width für table aber keinen Sinn.
Die Weite ist doch da, hat der wrapper.

Habe es so getestet! okay eben nicht.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:12 Uhr.