Lange Tabelle in einem <div>-Element

[n3o]

Hallo!
Folgendes ist vorhanden:

Es gibt eine lange Tabelle mit über 50 Zeilen und einer Spalte. Diese Tabelle dient als Tabellenkopf zur Beschriftung einer anderen rechts positionierten Tabelle. In der rechten Tabelle werden Analysedaten dargestellt.

Die Idee war, die linke Tabelle (da diese als Tabellenkopf fungiert) mittels <div>-Element und der CSS-Eigenschaft ""position:fixed" fest zu machen, so dass beim horizontalen Scrollen die linke Tabelle stehen bleibt und die rechte Tabelle bewegt wird.

Folgendes soll erreicht werden:

Beim vertikalen Scrollen soll die linke Tabelle zusammen mit der rechten Tabelle bewegt werden können, zur Zeit lässt es sich nicht realisieren, da die linke Tabelle aufgrund des <div>-Elements und seiner CSS-Eigenschaft "position:fixed" nicht bewegt werden kann.

Welche Lösung könnte sich für dieses Problem anbieten?

Vielen Dank!

 

[Efchen]

Es gibt eine lange Tabelle mit über 50 Zeilen und einer Spalte.

Das nennt sich dann eigentlich "Liste" und nicht "Tabelle". Aber mal weiterlesen...

Diese Tabelle dient als Tabellenkopf zur Beschriftung einer anderen rechts positionierten Tabelle.

Hört sich nach falscher HTML-Auszeichnung an. Wenn die beiden Spalten zusammengehören, müssen sie auch in einem table-Tag definiert sein, sonst kann kein Programm der Welt den Zusammenhang herstellen.

Die Idee war, die linke Tabelle (da diese als Tabellenkopf fungiert) mittels <div>-Element und der CSS-Eigenschaft ""position:fixed" fest zu machen

Dazu bedarf es keines zusätzlichen Elements. Genausowenig packst Du Deine Weihnachtsgeschenke zweimal in Geschenkpapier ein. Du kannst genauso Deine Tabelle positionieren. div dient zum Gruppieren mehrerer Elemente.

so dass beim horizontalen Scrollen die linke Tabelle stehen bleibt und die rechte Tabelle bewegt wird.

Wenn das der Grund ist, warum Du zwei Tabellen draus machst...definiere einen <thead> und einen <tbody>, dem Du overflow:auto mitgibst. Dann scrollt nur der tbody, und der thead bleibt stehen. UND alles ist in EINER Tabelle.

Gruß,
-Efchen

 

[n3o]

Das ist ja das Problem, dass <thead> nur beim Scrollen in horizontalen Richtung stehen bleiben soll!!! Und in der vertikalen Richtung soll <thead> mitscrollen ;-) Das ist das Problem!

 

[Efchen]

overflow-x: Übergroßer Inhalt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
overflow-y: Zu hoher Inhalt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets