Tabellen-Darstellungsproblem

Obelix

Liebe Leute,

ich habe eine komplex verschachtelte Tabellenstruktur, bei der ich auf "click" einzelne Teile dynamisch ein- und ausblenden will. Im Prinzip geht das auch, nur scheint es eine Art Massenproblem zu geben. Zur Verdeutlichung (hier mal statisch dargestellt):

HTML

<HTML> 
<BODY> 
<table border="1"> 
 <tr><td rowspan="29">000</td><td rowspan="1"> AAA </td></tr> 
 <tr><td rowspan="1"> BBB </td></tr> 
 <tr><td rowspan="2"> CCC </td><td rowspan="1"> DDD </td></tr> 
 <tr><td rowspan="1"> EEE </td></tr> 
 <tr><td rowspan="20"> FFF </td> 
     <td rowspan="1" style="display:block"> GGG </td></tr> 
 <tr><td rowspan="1" style="display:block"> HHH </td></tr> 
 <tr><td rowspan="1" style="display:block"> III </td></tr> 
 <tr><td rowspan="1" style="display:block"> JJJ </td></tr> 
 <tr><td rowspan="1" style="display:block"> KKK </td></tr> 
 <tr><td rowspan="1" style="display:block"> LLL </td></tr> 
 <tr><td rowspan="1" style="display:block"> MMM </td></tr> 
 <tr><td rowspan="1" style="display:block"> NNN </td></tr> 
 <tr><td rowspan="1" style="display:block"> OOO </td></tr> 
 <tr><td rowspan="1" style="display:block"> PPP </td></tr> 
 <tr><td rowspan="1" style="display:block"> QQQ </td></tr> 
 <tr><td rowspan="1" style="display:block"> RRR </td></tr> 
 <tr><td rowspan="1" style="display:block"> SSS </td></tr> 
 <tr><td rowspan="1" style="display:block"> TTT </td></tr> 
 <tr><td rowspan="1" style="display:block"> UUU </td></tr> 
 <tr><td rowspan="1" style="display:block"> VVV </td></tr> 
 <tr><td rowspan="1" style="display:block"> WWW </td></tr> 
 <tr><td rowspan="1" style="display:block"> XXX </td></tr> 
 <tr><td rowspan="1" style="display:block"> YYY </td></tr> 
 <tr><td rowspan="1" style="display:block"> ZZZ </td></tr> 
 <tr><td rowspan="3"> aaa </td><td rowspan="1"> bbb </td></tr> 
 <tr><td rowspan="1"> ccc </td></tr> 
 <tr><td rowspan="1"> ddd </td></tr> 
 <tr><td rowspan="1"> eee </td></tr> 
 <tr><td rowspan="1"> fff </td><td rowspan="1"> ggg </td></tr> 
</table> 
</body> 
</html>

Alles anzeigen

Das wird so angezeigt wie ich es erwarte. Wenn ich jetzt aber alle "block" durch "none" ersetze, erwarte ich eigentlich, daß die Zeile mit dem FFF auf eine Zeilenhöhe zusammenschnurrt und GGG bis ZZZ verschwinden.

Das Verschwinden klappt auch, aber das FFF nimmt sich jetzt mehr Platz als ihm zusteht, als ob die ganzen ausgeblendeten Tabellenelemente nicht völlig verschwinden, sondern nach wie vor ein bißchen Platz brauchen.

Kann das jemand bestätigen, und gibt es einen Trick das abzustellen?

Das "display:none" beim tr-Objekt zu platzieren nutzt leider auch nichts. Nur wenn ich weniger als 10 Zeilen verstecke (also in obigem Beispiel PPP bis ZZZ lösche und die "rowspan"s von 000 auf 18 und von
FFF auf 9 setze, sieht es stimmig aus.

Wer weiß Rat?

Gruß&Dank
Wolfgang

synaptic

mmh wenns immer die gleichen zeilen sind die du ausblendest, könntest du nen umschliessendes div nehmen und dem dann des display:none; und display:block; zuweisen
oder haste schon probiert dem sichtbaren teil ne feste höhe zu geben? würd auch gehen, aber mit deinem pseudoinhalt lässt sich das schwer sagen, denn es ist gut möglich, dass du an der stelle nichtma ne tabelle benötigst

threadi

Gleichzeitig mit der style-Änderung müsstest Du auch den rowspan-Wert der Zeile mit dem FFF anpassen. Wenn Zeilen weggenommen werden muss der Wert entsprechend niedriger gesetzt werden. Wenn mehr, dann höher.

Und du müsstest die <tr> ausblenden, nicht die <td>.

Btw. würde ich keiner Tabellezelle einen "display: block;"-Wert zuweisen. Richtig wäre "display: table-cell;" in deinem Fall.

Obelix

Zitat von threadi

Gleichzeitig mit der style-Änderung müsstest Du auch den rowspan-Wert der Zeile mit dem FFF anpassen.

Nein, genau das habe ich ausprobiert. Führt zu Chaos. Ausgeblendete Tabellenzeilen sind ja nicht weg, sondern nur ausgeblendet und mithin immer noch vorhanden, zählen also bei den rowspan's mit.

Zitat von threadi

Und du müsstest die <tr> ausblenden, nicht die <td>.

Auch das habe ich ausprobiert. Führt zu nichts.

Zitat von threadi

Btw. würde ich keiner Tabellezelle einen "display: block;"-Wert zuweisen. Richtig wäre "display: table-cell;" in deinem Fall.

OK, aber das Problem besteht ja um ausgeblendeten Fall,wenn display:none.

Gruß
WOlfgang

Zitat von synaptic

mmh wenns immer die gleichen zeilen sind die du ausblendest,

sind es nicht, im Gegenteil. Das ganze ist eine komplexe Baumstruktur, die in einer Datenbank liegt, von einem CGI-Skript ausgelesen und im Browser dargestellt wird. Die Applikation ist schon älter, die Datenstrukturen sind hochkomplex. Als neues Feature soll jetzt dazukommen, vor allem bei großen Bäumen Teilbereiche dynamisch ein- und ausblenden zu können.

Ich dachte ich wäre da auf einem guten Weg, nur zeigt sich jetzt besagtes Problem, daß bei vielen ( > 10) ausgeblendeten Zeilen der Rest mehr Platz braucht als ihm zusteht.

Zitat von synaptic

oder haste schon probiert dem sichtbaren teil ne feste höhe zu geben?

Ja, geht nicht, wird schlicht ignoriert. Das Attribut clientHeight des entsprechenden Objekts enthält die aktuelle Höhe, leider ist das Ding read-only.

Zitat von synaptic

denn es ist gut möglich, dass du an der stelle nichtma ne tabelle benötigst

In der Tat, aber wenn ich da ran gehe, kann ich gleich das ganze in 10 Jahren gewachsene Ding komplett neu schreiben, und dann trete ich lieber die Flucht nach vorn an und versuche mit den vergrößerten Zellen darstellungsmäßig klarzukommen, wenn es denn keine direkte Lösung gibt.

Gruß&Dank
Wolfgang

Tags