Responsive Tables

Tue, 27/11/2012 - 19:42
Body

Jquery automatische Lösung oder manuell css?

 

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

 

Sticky "hünscher" header mit JS

https://webdesign.tutsplus.com/tutorials/how-to-create-a-stylish-pricing-table-with-a-sticky-header--cms-33914

 

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

 

Drupal Module

http://drupal.org/sandbox/Anybody/1810488 http://drupal.org/sandbox/aptorian/1793634

Tagging
Webdevelopment
Add new comment
The content of this field is kept private and will not be shown publicly.

Plain text

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <drupal-entity data-*>
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.