nicht angemeldet
display:table-cell spaltenübergreifend
Hi,
Folgendes sei gegeben:
- Ein <ul> mit display:table,
- darin n <li> mit display:table-row,
- darin jeweils zwei bis drei <span> mit display:table-cell.
Bis hierhin ist das (unter der Prämisse, dass die Funktionsweise in einem Gecko ausreicht) noch problemarm. Man mag darüber streiten, ob <dl> die bessere Semantik wäre; ich hatte <ul> gewählt, was sich als günstig erwies. Nun die Schwierigkeit:
Es ist der seltene Fall denkbar, dass ein <li> mit nur einem Kind auftaucht; sei dies ein <span> oder #PCDATA, das <li> ist dann eh mit einer Klasse gekennzeichnet. Dieses Kind soll nun über die ganze Zeile gehen - sprich: es soll nicht die erste Spalte verbreitern. Auf welchem Weg auch immer. Innerhalb eines <table> würde man mit colspan arbeiten, dort ist es aber auch eine klar strukturelle Information. Hier könnte die vorhandene Struktur jedoch auch völlig anders dargestellt werden, so dass eine entsprechende Angabe in HTML nicht in Frage kommt (davon abgesehen, dass es auch nicht möglich wäre). Ich habe halt keine tabellarischen Daten, sondern eine tabellarische Darstellung.
Die CSS-Spezifikation bis einschl. CSS/3.0 sieht diesen Fall offenbar nicht vor. Meine Versuche, das Problem über display:table-* u.ä. zu lösen, waren erfolgfrei[1]. Hinweise des W3C, mit float zu arbeiten, brachten ebenfalls nichts[2]; und absolute Positionierung scheidet aus, weil ich die Höhe des Elements nicht kenne und daher die nachfolgenden Zeilen nicht verschieben kann. Unnötig zu sagen, dass eine Netzsuche ebenfalls nichts ergab :-) Was ich noch nicht versucht habe, ist Mozillas chrome-Dateien zu durchsuchen, ob ich dort zufällig auf eine Lösung z.B. mit -moz-Eigenschaften stoße - ehrlich gesagt verspreche ich mir davon aber auch nicht viel, und der Aufwand ist recht groß.
Wie kann ich das Problem lösen? Leichte Veränderungen an der Struktur sind möglich, aber z.B. eine Transformation steht nicht zur Debatte. Irgendwelche Ideen, Tipps oder Links?
Cheatah
[1] Genauer: Ich behelfe mich derzeit mit display:table-caption, was aber arg einschränkend ist.
[2] Innerhalb der Tabellendarstellung war es effektfrei, und die Darstellung komplett auf Floating umzustellen kommt nicht in Frage, da die Spaltenbreite flexibel ist und in jeder Zeile identisch sein muss.
--
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
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
-
Hi,
Es ist der seltene Fall denkbar, dass ein <li> mit nur einem Kind auftaucht; sei dies ein <span> oder #PCDATA, das <li> ist dann eh mit einer Klasse gekennzeichnet. Dieses Kind soll nun über die ganze Zeile gehen - sprich: es soll nicht die erste Spalte verbreitern. Auf welchem Weg auch immer. Innerhalb eines <table> würde man mit colspan arbeiten, dort ist es aber auch eine klar strukturelle Information. Hier könnte die vorhandene Struktur jedoch auch völlig anders dargestellt werden, so dass eine entsprechende Angabe in HTML nicht in Frage kommt (davon abgesehen, dass es auch nicht möglich wäre). Ich habe halt keine tabellarischen Daten, sondern eine tabellarische Darstellung.
Hm. Hilft evtl. overflow:visible?
-moz-overflow-x als Vorgriff auf CSS3 Box Module's overflow-x oder direkt overflow-x funktionieren nicht.Vermutlich nicht ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
Hm. Hilft evtl. overflow:visible?
ich vergaß zu erwähnen, dass nein (frei nach Schwejk ;-). Hierbei ist die flexible Spaltenbreite wieder das Problem - der overflow-Fall tritt gar nicht erst ein. Oder hast Du dazu noch eine Idee?
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
-
-
Hallo,
Folgendes sei gegeben:
Ich nehme an, das folgende Aussehen willst Du erreichen (Rahmen sind nur zur Veranschaulichung):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle mit UL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
table, td {border:1px solid black;}
td {padding:5px;}
-->
</style>
</head>
<body><table>
<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
<tr><td colspan="3">Spalte 1 und 2 und 3</td></tr>
<tr><td>Spalte1 länger</td><td>Sp2</td><td>Spalte3 länger</td></tr>
<tr><td colspan="2">Spalte 1 und 2</td><td>Spalte3</td></tr>
</table></body>
</html>Das versuchst Du so ähnlich umzusetzen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle mit UL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul, li, span {border:1px solid black;}
ul {display:table; margin:0; padding:0; list-style-type:none;}
li {display:table-row;}
span {display:table-cell; padding:5px;}
-->
</style>
</head>
<body><ul>
<li><span>Spalte1</span><span>Spalte2</span><span>Spalte3</span></li>
<li><span>Spalte 1 und 2 und 3</span></li>
<li><span>Spalte1 länger</span><span>Sp2</span><span>Spalte3 länger</span></li>
<li><span>Spalte 1 und 2</span><span>Spalte3</span></li>
</ul></body>
</html>Nun ist klar, dass das Aussehen des zweiten Codes sich nicht ohne colspan-ähnliche Darstellungen an das des ersten Codes angleichen lässt. Colspan ist aber in CSS derzeit nicht vorgesehen. Man kann darüber streiten, ob das richtig oder falsch ist. Meine Meinung ist, was wie eine Tabelle aussehen soll, kann auch eine Tabelle sein.
Folgendes wäre ohne Tabelle möglich (Grundgerüst wie oben):
<ul style="position:relative;">
<li><span>Spalte1</span><span>Spalte2</span><span>Spalte3</span></li>
<li><span style="position:absolute; white-space:nowrap;">Spalte 1 und 2 und 3</span><span> </span></li>
<li><span>Spalte1 länger</span><span>Sp2</span><span>Spalte3 länger</span></li>
</ul>Die letze Tabellenzeile wirst Du aber nicht ohne Tabelle darstellen können.
[1] Genauer: Ich behelfe mich derzeit mit display:table-caption,
Das wage ich zu bezweifeln. Captions sind entwerder oberhalb oder unterhalb der _gesamten_ Tabelle. Wie willst Du damit das angeführte Aussehen abbilden?
viele Grüße
Axel
-
Hi,
Ich nehme an, das folgende Aussehen willst Du erreichen (Rahmen sind nur zur Veranschaulichung):
eigentlich sogar nur dieses:
<table>
<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
<tr><td colspan="3">Spalte 1 und 2 und 3</td></tr>
<tr><td>Spalte1 länger</td><td>Sp2</td><td>Spalte3 länger</td></tr>
</table>Der Fall eines colspan bei mehr als einer Spalte ist nicht gegeben.
Das versuchst Du so ähnlich umzusetzen:
Ja, bis auf das letzte <li>.
Nun ist klar, dass das Aussehen des zweiten Codes sich nicht ohne colspan-ähnliche Darstellungen an das des ersten Codes angleichen lässt. Colspan ist aber in CSS derzeit nicht vorgesehen. Man kann darüber streiten, ob das richtig oder falsch ist.
Okay, so weit war ich schon :-)
Meine Meinung ist, was wie eine Tabelle aussehen soll, kann auch eine Tabelle sein.
Wie gesagt, dieses Aussehen ist nur _ein_ möglicher Wunsch. Die Inhalte sind _nicht_ tabellarischer Natur.
Folgendes wäre ohne Tabelle möglich (Grundgerüst wie oben):
Oh, Trick 17. Auf eine "blinde Spalte" bin ich noch nicht gekommen - danke, damit werde ich mal experimentieren.
[1] Genauer: Ich behelfe mich derzeit mit display:table-caption,
Das wage ich zu bezweifeln. Captions sind entwerder oberhalb oder unterhalb der _gesamten_ Tabelle.Ja, richtig. Das ist eine der Einschränkungen; die andere ist die Anzahl der Captions, welche auf maximal eine reduziert ist. Immerhin lässt es sich ohne weiteres so herrichten, dass der HTML-Code bestimmt, ob die Zeile oben oder unten ist - das ist aber schon alles.
Wie willst Du damit das angeführte Aussehen abbilden?
Wenn das ginge, wäre es kein Behelf ;-)
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-
Hallo,
Oh, Trick 17. Auf eine "blinde Spalte" bin ich noch nicht gekommen - danke, damit werde ich mal experimentieren.
Die "blinde Spalte" brauchte ich nur zum Erzwingen der Zeilenhöhe. Der eigentliche Trick ist das Herauslösen der Table-Cell aus dem normalen Elementfluss mit position:absolute.
Wobei ich nun merke, dass offensichtlich das position:relative; im UL-Element nicht nötig ist, wenn man bei top:auto; und left:auto; beim absolut positionierten Element bleibt. Ist das so korrekt? Zur Zeit kann ich hier nur mit Opera 7.23 testen. Dort sieht das Folgende gut aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle mit UL</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul, li, span {border:1px solid black;}
ul {display:table; list-style-type:none;}
li {display:table-row; height:1.5em;}
span {display:table-cell;}
span.colspan {position:absolute; white-space:nowrap;}
-->
</style>
</head>
<body>
<h1>Überschrift</h1>
<ul>
<li><span>Spalte1</span><span>Spalte2</span><span>Spalte3</span></li>
<li><span class="colspan">Spalte 1 und 2 und 3</span></li>
<li><span>Spalte1 länger</span><span>Sp2</span><span>Spalte3 länger</span></li>
<li><span class="colspan">Spalte 1 und 2 und 3</span></li>
<li><span>Sp1</span><span>Spalte2</span><span>Sp3</span></li>
</ul>
</body>
</html>viele Grüße
Axel
-
Hi,
Oh, Trick 17. Auf eine "blinde Spalte" bin ich noch nicht gekommen - danke, damit werde ich mal experimentieren.
Die "blinde Spalte" brauchte ich nur zum Erzwingen der Zeilenhöhe.ja, das ist klar. Leider musste ich mittlerweile feststellen, dass (wie es eigentlich zu erwarten war) lediglich die Höhe _dieser_ Spalte gewertet wird, nicht die derjenigen, um die es eigentlich geht. Wird der Text zweizeilig, geht er über die nächste Zeile.
Der eigentliche Trick ist das Herauslösen der Table-Cell aus dem normalen Elementfluss mit position:absolute.
Nun, position:absolute hatte ich ja bereits ausprobiert und verworfen ... :-)
Wobei ich nun merke, dass offensichtlich das position:relative; im UL-Element nicht nötig ist, wenn man bei top:auto; und left:auto; beim absolut positionierten Element bleibt. Ist das so korrekt?
Ja, als ich Deine Idee bei mir eingebaut hatte, verzichtete ich darauf gleich. Testweise hatte ich es noch eingefügt (sowohl in das <ul> als auch in das <li>), aber es änderte leider nichts.
span.colspan {position:absolute; white-space:nowrap;}
Hm, umbrechen sollte es schon dürfen ;-) Trotzdem vielen Dank für Deine Anregung!
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-
Hallo,
Der eigentliche Trick ist das Herauslösen der Table-Cell aus dem normalen Elementfluss mit position:absolute.
span.colspan {position:absolute; white-space:nowrap;}
Hm, umbrechen sollte es schon dürfen ;-)Das wird nicht funktionieren.[1]
Wenn Du das Element innerhalb der Tabellenstruktur belassen willst und es soll trotzdem über mehrere Spalten gehen, benötigst Du ein colspan, also eine HTML-Tabelle.
Löst Du es, egal wie, aus der Tabellenstruktur heraus, kannst Du nicht erwarten, dass sich die Tabellenstruktur noch um das Element kümmert oder das Element sich noch an der Tabellenbreite orientiert. Das musst Du dann irgendwie selbst tun, also das herausgelöste Element so breit machen wie nötig und die Zeile, über der Du das herausgelöste Element positionierst, so hoch machen wie nötig.
Brichst Du die Tabelle ab, um das Element einzufügen, dann orientiert sich natürlich die nachfolgende Tabelle nicht mehr an den Spaltenbreiten der abgebrochenen Tabelle. Die Spaltenbreiten müssten feststehen, was die display:table*-Eigenschaften unsinnig machen würde, da man dann gleich alle Elemente floaten lassen könnte.
Ergo:
Entweder es gibt irgendwann colspan via CSS oder es kommt nur eine float-Lösung in Frage. Bei letzterer müssen natürlich die Spaltenbreiten auch feststehen.[1] Die Erkenntnis, das etwas, im Moment, nicht lösbar ist, ist ja auch eine Erkenntnis.
viele grüße
Axel
-
Hi,
Das wird nicht funktionieren.[1]
[1] Die Erkenntnis, das etwas, im Moment, nicht lösbar ist, ist ja auch eine Erkenntnis.
tja ... meine Hoffnung war halt, dass jemand anders noch eine Erkenntnis hätte, auf die ich nicht gekommen bin. Insofern: Schade eigentlich :-) aber noch mal danke.
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
-
-
-
-
-