nicht angemeldet
Tabelle mit fixiertem "Kopf" auf der linken Seite
suit
0 0 
Matthias Apsel
0 suit
0 
Gunnar Bittersmann
0
0 0 suit
Tabelle mit fixiertem "Kopf" auf der linken Seite
suit
Ich benötige sowas hier:
http://aktuell.de.selfhtml.org/artikel/javascript/scrolltabelle/
Nur auf Höhe der Zeit ohne Frames - gerne auch eine JavaScript-Lösung.
Lösungen mit fixiertem Kopf oben (thead) findet man massenweise, ich brauche aber die äußert linke Spalte fixiert.
Hintergrund: eine _sehr_ breite Tabelle in einer normal breiten Inhaltsspalte
Mein prinzipieller Ansatz ist folgender:
Tabelle kommt in ein Element mit overflow-x: scroll - wenn JavaScript verfügbar ist, wird die Tabelle geklont - bei der ersten Tabelle wird alles bis auf die erste Spalte entfernt, bei der anderen Umgekehrt.
Beide werden nebeneinandergepackt und der rechte Teil landet in einem scrollbaren Element.
Problem bei der Sache sind die Höhen der Zellen - die muss man dann durchlaufen und entsprechend festlegen, da ansonsten ggf. der Kopf und der Datenteil auseinanderlaufen.
Gibts andere Ideen/Vorschläge hierzu?
-
Hi,
Problem bei der Sache sind die Höhen der Zellen - die muss man dann durchlaufen und entsprechend festlegen, da ansonsten ggf. der Kopf und der Datenteil auseinanderlaufen.
Gibts andere Ideen/Vorschläge hierzu?
Vielleicht etwas weniger Aufwand:
Die zusätzlichen Spalten nach dem Klonen *nicht* entfernen, sondern den overflow-Container der ersten Tabelle in x-Richtung auf overflow:hidden stellen und nur so breit machen, wie die erste Spalte breit ist;
und die zweite Tabelle mit negativem Margin oder Positionierung so ausrichten, dass die erste Spalte "verschwindet".MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Problem bei der Sache sind die Höhen der Zellen - die muss man dann durchlaufen und entsprechend festlegen, da ansonsten ggf. der Kopf und der Datenteil auseinanderlaufen.
Gibts andere Ideen/Vorschläge hierzu?
Vielleicht etwas weniger Aufwand:
Die zusätzlichen Spalten nach dem Klonen *nicht* entfernen, sondern den overflow-Container der ersten Tabelle in x-Richtung auf overflow:hidden stellen und nur so breit machen, wie die erste Spalte breit ist;
und die zweite Tabelle mit negativem Margin oder Positionierung so ausrichten, dass die erste Spalte "verschwindet".Das hatte ich auch schon, hat aber in manchen Clients den Nachteil, dass man trotzdem "scrollen" kann, wenn man das Mousewheel klickt und somit scrollt - aber das wäre ggf. zu vernachlässigen.
overflow: hidden müss natürlich gesetzt sein, sonst sieht das mit dem Scrollbar komisch aus, aber hier wird sowieso eine JavaScript-Lösung eingesetzt, dass man die Spalten "spaltenweise" durchblättern kann.
-
Hi,
Das hatte ich auch schon, hat aber in manchen Clients den Nachteil, dass man trotzdem "scrollen" kann, wenn man das Mousewheel klickt und somit scrollt - aber das wäre ggf. zu vernachlässigen.
Ggf. per onscroll-Handler unterdrückbar?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Das hatte ich auch schon, hat aber in manchen Clients den Nachteil, dass man trotzdem "scrollen" kann, wenn man das Mousewheel klickt und somit scrollt - aber das wäre ggf. zu vernachlässigen.
Ggf. per onscroll-Handler unterdrückbar?
Muss ich ausprobieren - aber die Lösung hierfür ist wahrscheinlich einfacher als die kompletten Höhen der Zeilen/Zeilen neu durchzurechnen, zumal hier auch nicht auf eine Änderung der Höhe reagiert werden kann.
-
-
-
-
Om nah hoo pez nyeetz, suit!
Beide werden nebeneinandergepackt und der rechte Teil landet in einem scrollbaren Element.
Gibts andere Ideen/Vorschläge hierzu?
semantisch etwas fragwürdig: gleich zwei Tabellen draus machen. Eine für die erste Spalte, eine für den Rest.
Matthias
--
1/z ist kein Blatt Papier.
-
semantisch etwas fragwürdig: gleich zwei Tabellen draus machen. Eine für die erste Spalte, eine für den Rest.
Das soll erst später durch JavaScript umgeformt werden, im ursprünglichen Quelltext soll die Tabelle als ganzes stehen.
-
@@Matthias Apsel:
nuqneH
semantisch etwas fragwürdig:
Ja. Und davon ganz abgesehen:
gleich zwei Tabellen draus machen. Eine für die erste Spalte, eine für den Rest.
Woher weiß die erste Tabelle die Höhen der entsprechenden Zeilen der zweiten Tabelle und andersrum?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Hi,
semantisch etwas fragwürdig: gleich zwei Tabellen draus machen. Eine für die erste Spalte, eine für den Rest.
Das sorgt aber auch nicht für automatisch gleiche Zellenhöhen über alle Spalten hinweg.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
Problem bei der Sache sind die Höhen der Zellen - die muss man dann durchlaufen und entsprechend festlegen, da ansonsten ggf. der Kopf und der Datenteil auseinanderlaufen.
Gibts andere Ideen/Vorschläge hierzu?
Idee: Tabelle "normal" anzeigen, dann links einen fixierten div drüberlegen und dort die erste Spalte hineinkopieren mitsamt Breiten- und Höhenangabe jeder Zelle. Die Kopie im div verdeckt also die erste Spalte.
So kann schon mal die Tabelle horizontal unter dem fixierten div gescrollt werden.
Gruß,
Linuxbär -
Statusupdate:
Ich klone die Tabelle jetzt und packe beide nebeneinander in div-Elemente mit overflow: hidden;
Ein Fallstrick dabei: die table-layout: fixed, eine feste Angabe der Breite für alle Spalten und die Tabelle selbst ist notwendig, da die Tabellen sonst unterschiedlich breit werden.
min-width: 1% würde zwar helfen, aber damit kommen alte Internet Explorer nicht zurecht. Da aber ohnehin JavaScript im Spiel ist, können die Breiten der Spalten einfach auf ihre derzeitigen berechneten Breiten gesetzt werden und die Sache ist erledigt.
Ansonsten siehts aber ganz gut aus und ich konnte keine Probleme feststellen.