Tabellenspalten fixieren

[Jeannine]

Hallo!

Bitte helft mir doch bei folgendem Problem:

Ich habe eine Tabelle mit zwei Spalten und ziemlich 5 Zeilen.

Jede einzelne Zeile ist mehr als eine Seite lang und jede Zelle für durch mehrere Anker strukturiert.

In der linken Spalte steht z. B. eine Oberrubrik pro Tabllenzeile.

Ich möchte gern, daß beim Scrollen in der jeweilen Reihe die Oberrubrik die ganze Zeit oben in der linken Spalte zu sehen ist.

Wie kann ich das vollbringen?

Danke für eure Antworten!

[Tom]

Hello,

ich dachte erst, ich hätte eine Lösung, aber das wird nicht funktionieren, da die "Zeilen" dan gebrochen wären und die linken Teile nichts mehr mit den rechten zu tun hätten:

große Tabelle mit zwei Zellen
  in der linken Tabelle dann eine eigene für die Oberbegriffe
  in der rechten dann eine CSS-Angabe mit overflow:auto und auch eine eigne Tabelle

Das klappt aber so leider nicht.

Aber wenn Du die ganze Tabelle nach diesem Muster aus Divs aufbaust, könnte es klappen

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Der Martin]

Hallo Jeannine,

Ich habe eine Tabelle mit zwei Spalten und ziemlich 5 Zeilen.

Wieviel, zum Henker, sind wohl "ziemlich 5 Zeilen"? ;))

Ist das so 'ne Redensart, oder waren hier die Finger auf der Tastatur schneller als der Verstand beim Diktieren?

Nichts für ungut,

Martin

[Jeannine]

Es sind fünf Zeilen für 5 Kategorien

z.B.

<table>
<tr><td>1. Kategorie</td>
<td>ganz viel Text getrennt durch Trennlinien pro Produkt über mehrere Seiten hinweg mit Anker pro Produkt-Beschreibungsanfang</td></tr>
<tr><td>2. Kategorie</td> usw.</tr>
</table>

So und die jeweilige Kategorie soll immer sichtbar sein, wenn man die gesamte Seite scrollt. Dasselbe sollen die anderen Kategorien dann auch tun.

Hoffe mich etwas verständlicher ausgedrückt zu haben.

[Der Martin]

Hallo,

<table>
<tr><td>1. Kategorie</td>
<td>ganz viel Text getrennt durch Trennlinien pro Produkt über mehrere Seiten hinweg mit Anker pro Produkt-Beschreibungsanfang</td></tr>
<tr><td>2. Kategorie</td> usw.</tr>
</table>

So und die jeweilige Kategorie soll immer sichtbar sein, wenn man die gesamte Seite scrollt. Dasselbe sollen die anderen Kategorien dann auch tun.

Hoffe mich etwas verständlicher ausgedrückt zu haben.

Jetzt ist es klar, danke!
Aber falls es dir entgangen sein sollte: Die Nachfrage war eher scherzhaft gemeint. :)
Ansatzweise hatte ich es auch vorher schon begriffen, aber ich konnte es noch nicht konkret fassen.

So, das heißt aber doch, wenn man es mal auf den Punkt bringt, dass du die zweite Spalte der Tabelle (die Produktbeschreibung) unabhängig von der linken Spalte scrollen müsstest.
Das geht so natürlich nicht.

Eine Behelfslösung wäre, nicht je Kategorie eine neue Zeile (TR) zu beginnen, sondern für jedes einzelne Produkt. Dann kannst du in der linken Spalte immer die Kategorie wiederholen.
Das sieht natürlich bei kurzen Beschreibungen, wenn also mehrere auf eine Bildschirmseite passen, nicht mehr so elegant aus.

Oder pack den Inhalt der zweiten Spalte (Beschreibungen) pro Kategorie in ein scrollbares DIV (mit overflow:auto) und begrenze die Höhe der TDs. Dann bleibt die Tabelle als Ganzes stehen und du kannst die Produktbeschreibungen innerhalb der Zelle scrollen.

Viel Erfolg,

Martin

[Jeannine]

Oder pack den Inhalt der zweiten Spalte (Beschreibungen) pro Kategorie in ein scrollbares DIV (mit overflow:auto) und begrenze die Höhe der TDs. Dann bleibt die Tabelle als Ganzes stehen und du kannst die Produktbeschreibungen innerhalb der Zelle scrollen.

Habe ich versucht. Hat sich aber nichts getan! Muß das div vielleicht vor dem td der zweiten spalte stehen?

ich hatte es jetzt so geschrieben:

<table>
<tr><td>1. Kategorie</td>
<td height="2000"><div style="overflow:auto">Ganz viele Produkte mit Beschreibung durch Trennzeichen getrennt</div></td></tr>
</table

[Der Martin]

Hallo Jeannine,

Habe ich versucht. Hat sich aber nichts getan! Muß das div vielleicht vor dem td der zweiten spalte stehen?

Nein, das muss _innerhalb_ der Zelle stehen.

<table>
<tr><td>1. Kategorie</td>
<td height="2000"><div style="overflow:auto">Ganz viele Produkte mit Beschreibung durch Trennzeichen getrennt</div></td></tr>
</table>

Das ist "im Prinzip" genau das, was ich meinte. Allerdings...
a) finde ich, dass die Höhe "2000" für die Zelle etwas übertrieben ist. Sollte so sein, dass die Tabellenzeile bei einer "üblichen" Fenstergröße noch komplett in Browserfenster passt, z.B. "500".
b) solltest du dem DIV noch eine Größe mit auf den Weg geben, sonst dehnt es sich wieder von selbst auf die nötige Größe, und die Tabellenzelle wächst automatsich mit. Genau das hast du jetzt, wenn ich deine Beschreibung richtig verstehe. Versuch deshalb, die style-Angabe für das DIV noch zu ergänzen: style="overflow:auto; height:100%" Dann sollte es klappen. ;)

So long,

Martin

[Gernot Back]

Hallo Jeannine,

Ich habe eine Tabelle mit zwei Spalten ...

In der linken Spalte steht z. B. eine Oberrubrik pro Tabllenzeile.

Ich möchte gern, daß beim Scrollen in der jeweilen Reihe die Oberrubrik die ganze Zeit oben in der linken Spalte zu sehen ist.

Wie kann ich das vollbringen?

Lies onScroll pageYOffset bzw. (für IE) document.body.scrollTop aus!

Wenn dann bestimmte Werte über- oder unterschritten werden, könntest du die als Grafiken vorbereiteten Oberbegriffe dynamisch als in der linken oberen Ecke fixierte Hintergrundgrafiken auswechseln.

Dann brauchst du auch nicht unbedingt eine Tabelle, sondern nur eine eine Seite, deren Body einen ausreichenden linken Innenabstand (padding-left) einhält, sodass der Text in der rechten "Spalte" nicht über die Oberrubrik (Hintergrundgrafik in der linken Spalte) fließt.

Wie du das Problem umgehst, dass das onscroll-Event in Mozilla nicht mit dem Mausrad ausgelöst wird, kannst du hier lesen.

Gruß Gernot

[Jeannine]

wenn ich eine graphik nehme und dann sage <img valign="top" src="img.jpg"> dann setzt er mir das Bild ja oben hin und beim runterscrollen läuft es ja nicht mit.

Wie kann ich den Effekt des erreichen, den du mir geraten hast.

DANKE!!!

[Gernot Back]

Hallo Jeannine,

wenn ich eine graphik nehme und dann sage <img valign="top" src="img.jpg"> dann setzt er mir das Bild ja oben hin und beim runterscrollen läuft es ja nicht mit.

Wie kann ich den Effekt des erreichen, den du mir geraten hast.

Ich spreche ja auch nicht von einer Vordergrundgrafik <img ...> sondern von einer Hintergrundgrafik für den Body, mit background-repeat:no-repeat und background-position:0px 0px sowie background-attachment:fixed.

Dann musst mit Javascript beim Herunterscrollen auslesen, ob der pageYOffset deiner Seite die offsetHeight deiner ersten Tabellenzeile überschreitet. Das wäre dann der Zeitpunkt, das Hintergrundbild, das du mit padding-left vor dem Überfließen durch den Text schützt auszutauschen. Wenn beim weiteren Herunterscrollen die Summe der offsetHeights deiner ersten beiden Zeilen überschritten wäre, käme dann der nächste Austausch des Hintergrundbildes usw...

Entsprechend könntest du beim Hochscrollen die Grafiken beim Unterschreiten der Werte zurücktauschen.

Der Ansatz ist ziemlich aufwändig in der Programmierung, läuft dann nicht bei deaktiviertem JS und deshalb finde ich eigentlich auch Martins Vorschlag gar nicht so schlecht, jede einzelen Inhaltszelle für sich scrollbar zu machen.

Gruß Gernot

[Gunnar Bittersmann]

Hi Jeannine,

Ich würd überlegen, ob es nicht sinnvoll wäre, die eine Seite in sechs aufzuteilen:
1. Inhaltsverzeichnis über die fünf Oberrubriken
2.–6. jede Oberrubrik auf ihrer eigenen Seite (evtl. mit Links zu den anderen, so dass man nicht immer wieder zum Inhaltsverzeichnis zurück muss)

Zum einen erledigt sich dein Problem; zum anderen denk ich, dass Nutzer lieber klicken als scrollen.

Gunnar

[Tom]

Hello,

Zum einen erledigt sich dein Problem; zum anderen denk ich, dass Nutzer lieber klicken als scrollen.

Seh ich auch so. Und für Tastatur-Junkies kann man dann noch Hot-Keys festlegen für die Links. Allerdings sind die Browser da ja nicht sehr kooperativ.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom