Webdevelopment
Drupal
Betriebssysteme
Design
Sonstige
overflow:hidden oder generell overflow auf dem container sorgt dafür das sticky nicht mehr funktioniert!
https://dev.to/jennieji/so-hard-to-make-table-header-sticky-14fj
Jquery automatische Lösung oder manuell css?
- http://dyn.com/responsive-css-table-design-in-practice-web-development/
- http://css-tricks.com/responsive-data-tables/
- http://css-tricks.com/responsive-data-table-roundup/ http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/ | lösung über ein dropdown wo man selektiert weche colums erscheinen sollen
UX
https://www.nngroup.com/articles/comparison-tables/
Viele der Scripte machen auf die Tabelle auch eine vertikale scrollbar. Quasi wie so ein iframe. Katastrophe weil das "Mousescroll" abfängt. Dabei wird width und height auf fest pixel gesetzt. Schlecht.
Problematik bei sticky row+column und horizontalem scrollen
Damit wir horizontal scrollen können muss der container oder auch die tabelle overflow-x: auto haben. Wenn man das macht dann klappt sicky header nicht mehr :) Super...
Problem sticky+overflow auto für horizontales scrollen: https://uxdesign.cc/position-stuck-96c9f55d9526
Methoden und Beispiele
- https://speckyboy.com/responsive-html-table-techniques/
- https://www.gsarigiannidis.gr/responsive-product-comparison-table-html-css-no-js/ | css attr label bei collapse in die cells
- Code dazu: https://codepen.io/gsarig/pen/LYVLexK
Sticky "hünscher" header mit JS
Fazit
https://github.com/yidas/jquery-freeze-table
Dieses script macht genau das was ich anfangs wollte. Es macht links(labels) und den header oben sticky. Auf mobile ist das aber weniger gut weil nicht genug breite.
Die Labels wie Alter/Laufzeit/Preis/Farbe/Whatever könne wir auch einfach mit dem overflow-x: auto bei einer flipped table mit purem css setzen. Außerdem entfernen wir die Labels auf mobile und plazieren die in den Zellen über der Zelle(Laufzeit: 30 in der Zelle).
Jetzt fehlt nur noch ein sticky header oben und zwar ohne der Tabelle eine feste Höhe zuzuweisen, denn das fängt den mouse scroll ab wenn man über der tabelle ist und scrollt dann die anstatt der Seite. Das ist verwirrend! Pures css mit sticky header geht aber nicht weil wir "overflow-:x auto" nutzen. Außer wir geben der Tabelle eine feste höhe mit scrollbar....siehe gerade erwähntes scrollproblem.
Js muss her.
Scripte
- https://tympanus.net/Tutorials/StickyTableHeaders/index3.html | h und v scrolling und sticky per js DEMO
- https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/ HOWTO
- https://github.com/jmosbech/StickyTableHeaders | nur der header oben
- https://github.com/yidas/jquery-freeze-table | das schein tes als script zu machen
Drupal Module
http://drupal.org/sandbox/Anybody/1810488 http://drupal.org/sandbox/aptorian/1793634