Responsive Multi Column Data Tables

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Maggie Costello Wachs von Filament Group teilt den besten Ansatz für responsive Datentabellen, den ich bisher gesehen habe. Erinnern Sie sich an das Problem: Das Erkunden einer großen Datentabelle auf kleinen Bildschirmen bedeutet viel horizontales und vertikales Scrollen, was schlecht ist. Ihre Lösung besteht darin, Spalten mit CSS-Klassen als „wesentlich“ und „optional“ zu kennzeichnen und die optionalen Spalten mit Media Queries auf kleineren Bildschirmgrößen auszublenden. Um alle Daten zugänglich zu halten, wird ein (dynamisch erstelltes) Dropdown mit Kontrollkästchen bereitgestellt, um die ausgeblendeten optionalen Spalten anzuzeigen.

Update: Der Link wurde zu Tablesaw von Filament Group geändert, einer Sammlung von Plugins, die viele verschiedene Techniken für responsive Tabellen bietet.

Direkter Link →