nicht angemeldet
display auf Tabellen
0 0 dein Ego
0 0
display auf Tabellen
Hallo,
bin erneut auf ein Problem bzw. ein Verständnisproblem im Zusammenhang mit der CSS-Eigentschaft display gestossen:
Ich möchte eine Tabelle (<table>) mit css derart darstellen, dass diese die gesamte Breite und eine exakte/vorgegebene Höhe einnimmt.
Ich meine verstanden zu haben, dass <table> per Default die Display-Eigenschaft "table" bekommt. Warum die Tabelle bei dieser Eigenschaft nicht die gesamte Breite bekommt, ist mir leider noch unklar!?
Da ich die gleiche Darstellung erreichen möchte, wie (per default) beim div-element, habe ich für die Tabelle display auf "block" gestelt.
Im FF ist das Verhalten wie von mir gedacht, der IE zeigt leider die Tabelle nicht in der vorgegebenen Höhe und Breite an keine, es erscheinent auch keine Scrollbar.
Hier ein Beispiel-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test: Scrollbare Tabelle</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body {
margin: 0;
padding: 0;
border: 0;
}
table.scrolltest {
height: 200px;
overflow: auto;
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<h1>scrollbare Tabelle</h1>
<table class="scrolltest">
<tr>
<td>Eins</td>
<td>Eins</td>
</tr>
<tr>
<td>Test</td>
<td>Zwei</td>
</tr>
<tr>
<td>Drei</td>
<td>Drei</td>
</tr>
<tr>
<td>Vier</td>
<td>Vier</td>
</tr>
<tr>
<td>Eins</td>
<td>Eins</td>
</tr>
<tr>
<td>Zwei</td>
<td>Zwei</td>
</tr>
<tr>
<td>Drei</td>
<td>Drei</td>
</tr>
<tr>
<td>Vier</td>
<td>Vier</td>
</tr>
<tr>
<td>Eins</td>
<td>Eins</td>
</tr>
<tr>
<td>Zwei</td>
<td>Zwei</td>
</tr>
<tr>
<td>Drei</td>
<td>Drei</td>
</tr>
<tr>
<td>Vier</td>
<td>Vier</td>
</tr>
<tr>
<td>Eins</td>
<td>Eins</td>
</tr>
<tr>
<td>Zwei</td>
<td>Zwei</td>
</tr>
<tr>
<td>Drei</td>
<td>Drei</td>
</tr>
<tr>
<td>Vier</td>
<td>Vier</td>
</tr>
<tr>
<td>Eins</td>
<td>Eins</td>
</tr>
<tr>
<td>Zwei</td>
<td>Zwei</td>
</tr>
<tr>
<td>Drei</td>
<td>Drei</td>
</tr>
<tr>
<td>Vier</td>
<td>Vier</td>
</tr>
</table>
</body>
</html>
Handelt es sich um einen IE-Bug oder was mache ich falsch? Gibt es andere/bessere Lösungen oder Workarounds?
Viele Grüße
Daniel
-
Ich möchte eine Tabelle (<table>) mit css derart darstellen, dass diese die gesamte Breite und eine exakte/vorgegebene Höhe einnimmt.
<style type="text/css">
table.scrolltest {
height: 200px;
overflow: auto;
display: block;
background-color: yellow;
}
</style>> Handelt es sich um einen IE-Bug oder was mache ich falsch? Gibt es andere/bessere Lösungen oder Workarounds? du solltest ggf [brain.exe](http://brain.yubb.de/) updaten, ggf hat diese einen bug - ich entnehme nirgens eine breitenangabe für deine tabelle dein overflow: auto; wird aber nicht von erfolg gekrönt sein, die einzig zuverlässige methode ist imho das scrollen einer tabelle über ein zusätzliches element aussen herum leider scheitern alle standardkonformen methoden (oder das scrollen eines tbody-elements) an der mangelnden unterstützung durch diverse browser-
du solltest ggf brain.exe updaten, ggf hat diese einen bug - ich entnehme nirgens eine breitenangabe für deine tabelle
Kannst du mal zwei Schritte zurücktreten und dein aufgeblasenes Ego ausluften?
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
-
Kannst du mal zwei Schritte zurücktreten und dein aufgeblasenes Ego ausluften?
ach gottchen, sei nicht so empfindlich - lies den text und schmunzle darüber ;)
-
-
-
Ich möchte eine Tabelle (<table>) mit css derart darstellen, dass diese die gesamte Breite und eine exakte/vorgegebene Höhe einnimmt.
Ich meine verstanden zu haben, dass <table> per Default die Display-Eigenschaft "table" bekommt. Warum die Tabelle bei dieser Eigenschaft nicht die gesamte Breite bekommt, ist mir leider noch unklar!?
Der Default ist nicht normiert. browser können ihr eigenes Browserstylesheet abweichend voneinander gestalten.
Und der Default ist meiner Erfahrung gemäss
margin-right:0;
margin-left:auto;
width:auto;aber du kannst natürlich selbst einen anderen default einstellen
table{width:100%; margin:0; padding:0; border:0;}
mfg Beat
-
Hi Beat,
Ich möchte eine Tabelle (<table>) mit css derart darstellen, dass diese »» Der Default ist nicht normiert. browser können ihr eigenes Browserstylesheet abweichend voneinander gestalten.
Und der Default ist meiner Erfahrung gemäss
margin-right:0;
margin-left:auto;
width:auto;Ok, da hast Du Recht, auf browserübergreifende Defaults kann man nicht hoffen.
table{width:100%; margin:0; padding:0; border:0;}
width:100% bewirkt aber nicht dasselbe Verhalten wie bei einem <div>! Genau *das* ist der Punkt, um den es mir geht:
Betrachtet folgendes Beispiel:
<h2>Das gleiche mit einem <code>div</code></h2> <div style="height: 200px; overflow: auto; background-color: lime;"> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> </div> <div style="width: 300px; height: 300px; background-color: yellow; overflow: auto;"> <p style="border: 3px solid blue; padding: 10px; width:100%;">Mit width 100%</p> <p style="border: 3px solid blue; padding: 10px; ">Ohne width 100%</p> </div>Ich würde meine Tabelle gerne so (mit css) darstellen, das diese aussieht wie mein <div>.
Am Beispiel mit dem <div> und den eingeschachtelten <p>s sieht sieht man den Unterschied, den ich meine!
Wenn <p> "width=auto" kriegt, bekommt es die gesamte Breite des umschließenden <div>s. Mit width=100% "zuviel" Breite, Stichwort Boxmodell incls. padding und border...Viele Grüße
Daniel-
Hi,
Ich würde meine Tabelle gerne so (mit css) darstellen, das diese aussieht wie mein <div>.
Du meinst, dass width:auto zum selben Ergebnis führt? Dann darf zunächst einmal die Tabelle kein display:table sein, denn dort ist width:auto anders definiert, als Du es hier haben möchtest.
Darüber hinaus muss der Browser aber auch ein Wegschalten von display:table ermöglichen, d.h. eben dies muss der Default-Wert von <table>-Elementen sein. Ergo: Im IE sieht's düster aus. Es gäbe zwar (bedingt) den Workaround über position:absolute mit left- *und* right-Angabe, nur scheitert dieser daran, dass (tadaa!) der IE es nicht kann.
Schlussfolgerung: Gehe den Weg, für den das World Wide Web konzipiert wurde, und biete jedem Client das ihm bestmögliche Ergebnis. Das bedeutet, dass jeder Browser ein width:auto mit display:block bekommt, so dass alle es wie gewünscht darstellen, und nur der IE eine schiefe Krücke zeigt. Macht nichts, alle Inhalte sind erreichbar, alles funktioniert wie gehabt, es sieht halt nur nicht ganz so gut aus. That's life.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Yerf!
Schlussfolgerung: Gehe den Weg, für den das World Wide Web konzipiert wurde, und biete jedem Client das ihm bestmögliche Ergebnis. Das bedeutet, dass jeder Browser ein width:auto mit display:block bekommt, so dass alle es wie gewünscht darstellen, und nur der IE eine schiefe Krücke zeigt.
Für den IE könnte man noch den "ultrabösen" Weg des Quirks-Mode einschlagen und dessen Boder-Box-Model ausnutzen. Damit würde sich width:100% wie gewünscht verhalten. Die Frage ist aber, ob man das wirklich will...
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi,
Für den IE könnte man noch den "ultrabösen" Weg des Quirks-Mode einschlagen und dessen Boder-Box-Model ausnutzen. Damit würde sich width:100% wie gewünscht verhalten. Die Frage ist aber, ob man das wirklich will...
Genau diesen möchte ich los werden, der macht noch mehr Ärger ;-)
Daniel
-
Yerf!
Genau diesen möchte ich los werden, der macht noch mehr Ärger ;-)
Im absoluten Notfall könnte man noch ein zusätzliches DIV reinschachteln, dass die benötigten Abmessungen per width:auto erhält. Da rein packt man dann die Tabelle mit width:100%
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hallo,
Im absoluten Notfall könnte man noch ein zusätzliches DIV reinschachteln, dass die benötigten Abmessungen per width:auto erhält. Da rein packt man dann die Tabelle mit width:100%
Daran hatte ich auch schon gedacht, da könnte ich auch mit leben. Meine Versuche führen aber leider (neben der Scrollbar vom div) zu einer weiteren horizontalen Scrollbar (vom Viewport) im IE. Scheinbar "sprengt" genau die breite der div-Scrollbar die Darstellung im IE.
So hatte ich es versucht, war es das was du meintest?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test: Scrollbare Tabelle</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> html,body { margin: 0; padding: 0; border: 0; } .scrolltest { width: auto; height: 200px; overflow: auto; background-color: yellow; } </style> </head> <body> <h1>scrollbare Tabelle</h1> <div class="scrolltest"> <table style="background-color: silver; width: 100%;"> <tr> <td>Eins</td> <td>Eins</td> </tr> <tr> <td>Test</td> <td>Zwei</td> </tr> <tr> <td>Drei</td> <td>Drei</td> </tr> <tr> <td>Vier</td> <td>Vier</td> </tr> <tr> <td>Eins</td> <td>Eins</td> </tr> <tr> <td>Zwei</td> <td>Zwei</td> </tr> <tr> <td>Drei</td> <td>Drei</td> </tr> <tr> <td>Vier</td> <td>Vier</td> </tr> <tr> <td>Eins</td> <td>Eins</td> </tr> <tr> <td>Zwei</td> <td>Zwei</td> </tr> <tr> <td>Drei</td> <td>Drei</td> </tr> <tr> <td>Vier</td> <td>Vier</td> </tr> </table> </div> </body> </html>Viele Grüße
Daniel
-
-
-
Für den IE könnte man noch den "ultrabösen" Weg des Quirks-Mode einschlagen und dessen Boder-Box-Model ausnutzen. Damit würde sich width:100% wie gewünscht verhalten. Die Frage ist aber, ob man das wirklich will...
warum böse?
Du kannst praktisch für alle verbreiteten Browser das Border-Box Modell zum Standard erheben.
Das ist nicht böse, sondern eine Option in CSS3.
Viele halten das für sehr viel intuitiver.
http://www.quirksmode.org/css/box.html* {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box
-webkit-box-sizing: border-box
/* versteht opera das folgende? */
box-sizing: border-box;
}mfg Beat;
-
Yerf!
warum böse?
Wegen der restlichen Nebenwirkungen des Quirksmode.
Du kannst praktisch für alle verbreiteten Browser das Border-Box Modell zum Standard erheben.
Im IE aber erst ab Version 8. In den älteren muss man sich dann mit den ganzen Bugs eines IE 5 rumschlagen.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
Hi,
Du meinst, dass width:auto zum selben Ergebnis führt? Dann darf zunächst einmal die Tabelle kein display:table sein, denn dort ist width:auto anders definiert, als Du es hier haben möchtest.
Danke, genau das wollte ich damit beschreiben. Ich war mir nur nicht sicher, ob das wirklich so ist.
Darüber hinaus muss der Browser aber auch ein Wegschalten von display:table ermöglichen, d.h. eben dies muss der Default-Wert von <table>-Elementen sein. Ergo: Im IE sieht's düster aus. Es gäbe zwar (bedingt) den Workaround über position:absolute mit left- *und* right-Angabe, nur scheitert dieser daran, dass (tadaa!) der IE es nicht kann.
Ja, dass hatte ich befürchet.
Trotzdem vielen Dank!
Daniel
-
-
-
-
Yerf!
Ich möchte eine Tabelle (<table>) mit css derart darstellen, dass diese die gesamte Breite und eine exakte/vorgegebene Höhe einnimmt.
Dann gib der Tabelle per CSS die entsprechende height- und width-Angabe, das sollte in den meisten Fällen fukntionieren. Allerdings klingt das ganze für mich etwas nach Layout-Tabelle (bei der Darstellung von tabellarischen daten ist man meist nicht auf ein derart exaktes Layout angewiesen), das solltest du besser lassen.
Ich meine verstanden zu haben, dass <table> per Default die Display-Eigenschaft "table" bekommt. Warum die Tabelle bei dieser Eigenschaft nicht die gesamte Breite bekommt, ist mir leider noch unklar!?
Eine Tabelle richtet sich bei der Darstellung nach ihrem Inhalt. Zur Darstellung von Daten ist das ein durchaus praktischer Default. Allerdings unterstützen nicht alle Browser die display:table-Eigenschaft und haben deswegen ein etwas "eigenwilliges" Verhalten bei Tabellen. Dazu gehört auch der IE bis Version 7.
Da ich die gleiche Darstellung erreichen möchte, wie (per default) beim div-element, habe ich für die Tabelle display auf "block" gestelt.
Dies kann nur etwas bewirken, wenn die display-Eigenschaft vorher auf etwas anderem Stand. Beim IE ist diese aber bereits "block".
Im FF ist das Verhalten wie von mir gedacht, der IE zeigt leider die Tabelle nicht in der vorgegebenen Höhe und Breite an keine, es erscheinent auch keine Scrollbar.
Wie gesagt: der IE behandelt Tabellen komplett anders als der FF.
Handelt es sich um einen IE-Bug oder was mache ich falsch? Gibt es andere/bessere Lösungen oder Workarounds?
Kein Bug sondern ein fehlendes Feature (zumindest ist es nach den Specs erlaubt eine derartige Sonderlogik für Tabellen zu verwenden)
Gewöhne dich daran, das Browser meist denken sie wüssten es besser, wie tabellarische Daten darzustellen wären...
(oft kann man zwar mit table-layout:fixed noch etwas drehen, ist aber eigentlich nicht Sinn der Sache)
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi,
Dann gib der Tabelle per CSS die entsprechende height- und width-Angabe, das sollte in den meisten Fällen fukntionieren. Allerdings klingt das ganze für mich etwas nach Layout-Tabelle (bei der Darstellung von tabellarischen daten ist man meist nicht auf ein derart exaktes Layout angewiesen), das solltest du besser lassen.
Meine Versuche mit width:100% scheitern, da ich dann "zuviel" Breite bekomme, da natürlich auch padding und border zu den 100% gerechnet werden...
Bei div/p ist das Verhalten anders. Woher kommt das? Kann man darauf Einfluß nehmen? Siehe dazu auch mein zweites Beispiel in diesem Thread.(Ich brauche die Tabelle nicht zum "Layouten"...)
Eine Tabelle richtet sich bei der Darstellung nach ihrem Inhalt. Zur Darstellung von Daten ist das ein durchaus praktischer Default. Allerdings unterstützen nicht alle Browser die display:table-Eigenschaft und haben deswegen ein etwas "eigenwilliges" Verhalten bei Tabellen. Dazu gehört auch der IE bis Version 7.
Dies kann nur etwas bewirken, wenn die display-Eigenschaft vorher auf etwas anderem Stand. Beim IE ist diese aber bereits "block".
Hm, was den jetzt? display:table ode display:block im IE?
(oft kann man zwar mit table-layout:fixed noch etwas drehen, ist aber eigentlich nicht Sinn der Sache)
... dann hängt die Darstellung eben nicht von den Daten ab ;-)
Viele Grüße
Daniel-
Hi,
Woher kommt das?
Kann man darauf Einfluß nehmen?
Ja, im Wesentlichen über die display-Eigenschaft (direkt oder indirekt). Das Problem ist, dass der IE kein display:table kennt, sondern dort display:block sieht und *trotzdem* width:auto wie bei display:table vorgesehen berechnet.
Dies kann nur etwas bewirken, wenn die display-Eigenschaft vorher auf etwas anderem Stand. Beim IE ist diese aber bereits "block".
Hm, was den jetzt? display:table ode display:block im IE?Für den IE existiert kein display:table. Er richtet sein Darstellungs-Verhalten in Teilen nach dem Namen des Elements - das ist einer der Hauptgründe für seine erheblichen Qualitätsmängel.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-