| Autor |
Nachricht |
0o0
Threadersteller
Dabei seit: 07.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 25.05.2011 14:50
Titel 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:
| 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>
|
|
|
| |
  |
 |
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: 
|
Verfasst Mi 25.05.2011 15:31
Titel Re: Zellenbreite stimmt nicht, trotz table-layout:fixed |
|
|
| 0o0 hat geschrieben: | ...
[code]...
th {
background: #F2F2F2;
border: 1px solid #AAAAAA;
padding: 0.2em;
}
... |
Vermutlich liegt es an der Rahmenbreite die in der Gesamtbreite nicht berücksichtigt wurde.
http://www.css4you.de/wsboxmodell/index.html 
Edit: ... und natürlich auch padding berücksichtigen!
Zuletzt bearbeitet von top am Mi 25.05.2011 15:40, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
0o0
Threadersteller
Dabei seit: 07.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 25.05.2011 15:53
Titel
|
|
|
|
Selbst wenn alle Innenabstände und Rahmen entfernt werden, bleibt das Problem vorhanden. Zudem werden diese benötigt.
|
|
| |
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 25.05.2011 17:24
Titel
|
|
|
Also ich würde trotzdem spontan sagen, dass es an deinem th liegt, denn:
dein "table" ist 800px breit, alle th zusammen sind auch 800px breit. Da jedes th aber noch nach oben, unten, links und rechts ein padding von 0.2em hat, ist also die Gesamtbreite aller ths breiter als 800 px...
Dazu kommt natürlich für jedes th noch 2x 1px border hinzu.
Da du aber sagst, dass das auch nicht der Fehler sein kann, könnte es auch evtl an dem border-collapse liegen. sollte das nicht auf die ths und nicht auf table angewandt werden?
|
|
| |
|
|
0o0
Threadersteller
Dabei seit: 07.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 25.05.2011 17:39
Titel
|
|
|
| immerIch hat geschrieben: | | Da du aber sagst, dass das auch nicht der Fehler sein kann, könnte es auch evtl an dem border-collapse liegen. sollte das nicht auf die ths und nicht auf table angewandt werden? |
Och Jungs. Jetzt enttäuscht ihr mich aber ziemlich. Muss ich euch jetzt allen Ernstes noch die CSS-Elemente erklären? Ich glaub ich bin hier falsch …
|
|
| |
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Mi 25.05.2011 17:57
Titel
|
|
|
Dann rechne mal richtig nach!
Und damit sich das vernünftig berechnen lässt sollte man nicht pt und px mischen.
Versuch es mal hiermit:
| Code: | 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: 801px;
}
th {
background: #F2F2F2;
border: 1px solid #AAAAAA;
padding: 2px;
}
.infobox {
height: 40px;
width: 801px;
margin: 20px 0px 5px;
text-align:center;
}
.green {
background: lightgreen;
}
.red {
background: lightpink;
}
.fixed {
table-layout: fixed;
}
.w40 {
width: 35px;
}
.w100 {
width: 95px;
}
.w120 {
height: 20px;
width: 115px;
}
.w260 {
width: 255px;
} |
|
|
| |
|
|
0o0
Threadersteller
Dabei seit: 07.08.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 25.05.2011 18:56
Titel
|
|
|
| top hat geschrieben: | | Und damit sich das vernünftig berechnen lässt sollte man nicht pt und px mischen. |
Du meintest wohl em. pt hatte ich gar nicht verwendet.
| top hat geschrieben: | | Versuch es mal hiermit: |
Dein Ansatz ist nachvollziehbar. Danke dir! Nun steht zwar dem Zelleninhalt weniger Platz zur Verfügung, aber das ist jetzt erst einmal nebensächlich. Das bekomme ich schon geregelt.
Allerdings sieht es mit der Browserkompatibiltät nun anders aus. War es zuvor lediglich Chromium, der den Inhalt korrekt angezeigt hat, so ist nun ausgerechnet dieser Browser, der den Inhalt als einziger (IE kann ich leider nicht testen) falsch anzeigt; zumindest wenn table-layout:fixed verwendet wird. Also immer noch nicht das Gelbe vom Ei. 
|
|
| |
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 25.05.2011 21:51
Titel
|
|
|
| 0o0 hat geschrieben: | | immerIch hat geschrieben: | | Da du aber sagst, dass das auch nicht der Fehler sein kann, könnte es auch evtl an dem border-collapse liegen. sollte das nicht auf die ths und nicht auf table angewandt werden? |
Och Jungs. Jetzt enttäuscht ihr mich aber ziemlich. Muss ich euch jetzt allen Ernstes noch die CSS-Elemente erklären? Ich glaub ich bin hier falsch … |
Das sind keine Elemente, sondern Attribute.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Jommla in Table-Layout
[CSS] IE8 mit :after und position:fixed nicht wirklich fixed
Zentrieren & Fixed im IE
Position fixed
[CSS] position:fixed und der IE
IE6 und position:fixed
|
|
Willkommen auf dem Portal für Mediengestalter
