Fester Tabellenheader mit CSS

[Marvin Esse]

Hallo,

auf der Suche nach einer eleganten Möglichkeit, wie ich scrollbare Tabellen mit festen Header bekomme, bin ich auf den folgenden Fiddle gestoßen: Fiddle Nur leider verstehe ich nicht, wie es gemacht wurde.

Kann mir einer erklären wie das funktioniert? Die Table-Header-Zeile hat z.B. Klasse header bekommen, aber diese ist in den CSS nirgends definiert ?? Ich vermute, dass nur das CSS für die th-Tags und die im th-Tag enthaltenen DIV das Geheimnis sind?

Gruß,

Marvin

[Matthias Apsel]

Hallo Marvin Esse,

Schau dir mal Tabelle ohne Titelzeile scrollen an.

Bis demnächst
Matthias

[Marvin Esse]

Hallo Matthias,

Schau dir mal Tabelle ohne Titelzeile scrollen an.

Ich habe mir die dortige Lösung angeschaut und werde versuchen das bei mir einzubauen. Vielen dank für den Tipp.

Marvin

[Marvin Esse]

Ich habe mir die dortige Lösung angeschaut und werde versuchen das bei mir einzubauen.

Wenn ich das richtig erkenne, wird hier auch die Verwendung von festen vorgegebenen Breiten für die Felder im Header und Body der Tabelle vorausgesetzt. Auch muss die Höhe des Headers angegeben werden. Das ist bei meinen dynamischen Tabellen leider nur bedingt einsetzbar.

Wäre es denkbar mit etwas Javascript das DIV nach dem Rendern der Tabelle korrekt zu positionieren?

Marvin

[Matthias Apsel]

Hallo Marvin Esse,

Wäre es denkbar mit etwas Javascript das DIV nach dem Rendern der Tabelle korrekt zu positionieren?

Denkbar schon, aber das will man eigentlich nicht. Dieser Entwurf schaut auf den ersten Blick bis auf die Klassen für die Tabellenzeilen auch ganz gut aus.

Bis demnächst
Matthias

[JürgenB]

Hallo,

Dieser Entwurf schaut auf den ersten Blick bis auf die Klassen für die Tabellenzeilen auch ganz gut aus.

wenn ich das richtig sehe, haben hier die Tabellenfelder aber auch feste Breiten.

Ich habe das gerade noch mal bei meiner Variante getestet: wenn man die Breiten weg lässt, sind die Tabellenfelder im thead und im tbody nicht mehr gleich breit.

Eine Javascript-Lösung wäre zwar nicht schön, aber möglich. Sie müsste die Breiten spaltenweise auf das Maximum der Breite von Kopf und Körperzelle setzen. Ohne Javascript wären die Zellen dann unterschiedlich Breit, aber man könnte ja für diesen Fall allen die gleiche Breite geben.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Marvin Esse

Wenn ich das richtig erkenne, wird hier auch die Verwendung von festen vorgegebenen Breiten für die Felder im Header und Body der Tabelle vorausgesetzt. Auch muss die Höhe des Headers angegeben werden.

Ich hab da mal was gebastelt, was ohne feste Breiten auskommt.

Ist aber noch eine Bastelei, ohne Anspruch, allen Fällen gerecht zu werden.

Unschön auch, dass im Firefox auf Systemen, die Scrollbars nicht über dem Inhalt, sondern daneben darstellen, ebensolche zu sehen sind, auch wenn sie nicht gebraucht werden.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Ich hab da mal was gebastelt, was ohne feste Breiten auskommt.

sieht schon mal gut aus. Gut, das du keine umschließenden Elemente benötigst. Ich habe aber eine Frage:

Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.

Damit ist sichergestellt, dass wirklich für wirklich alle Elemente box-sizing: border-box gilt. Damit lassen sich Abmessungen von Elementen ohne Rücksicht auf Innenabstände festlegen. Siehe auch box-sizing im Wiki.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.

Damit ist sichergestellt, dass wirklich für wirklich alle Elemente box-sizing: border-box gilt.

Das ist doch schon mit * sichergestellt. ;-)

LLAP 🖖

[Gunnar Bittersmann]

@@JürgenB

Wozu benötigst du die Angabe zu „*, ::before, ::after“? Ich habe das mal weggelassen und im FF keinen Unterschied bemerkt.

Damit die Umschaltung des Boxmodells auch auf Pseudoelemente wirkt.

Braucht man hier vielleicht nicht. Aber besser gleich mit reinschreiben als es später zu vergessen.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

ich habe deine Bastelei getestet:

OK in
FF unter Windows
FF unter OS X
Safari
Edge
IE 8-11 im Edge emuliert

Fast OK, da der tbody wegen des Scrollbars breiter ist, als der thead
Chrome unter Windows

Gruß
Jürgen

PS Mein altes Windows Phone (7.8) wird leider von codepen nicht unterstützt