Reszponzív táblázatok
A reszponzív táblázatok megjelenítésére mobileszközön több lehetőség is létezik, ezek közül mutatok be most kettőt a videóban. Az első megoldásnál klasszikus táblázatot használunk, a másodiknál pedig DIV-eket, és a flexbox model-t hívjuk segítségül a reszponzív megjelenítéshez.
Megoldás klasszikus táblázatokkal
A sima HTML táblázatoknál egy media query segítségével megadott töréspontok alatt el tudunk tüntetni oszlopokat, vagy csökkenteni tudjuk a padding értékét. Ezekkel a megoldásokkal ugyan több helyet nyerünk kis képernyőn, viszont nem minden információ fog megjelnni a mobilról érkező felhasználónak.
Egy másik lehetséges út, ha a táblázatot egy vízszintesen scrollozható DIV-be tesszük, ezzel lehetőséget biztosítva mobileszközön a táblázat vízszintes görgetésére anélkül, hogy a tartalmat széttolná a böngészőben. Ez egy viszonylag gyakori megoldás, azonban felhasználói élmény szempontjából egyáltalán nem szerencsés.
Reszponzív táblázatok flexbox layout-tal
Ennél a megoldásnál a flexbox modelt hívjuk segítségül. Itt a táblázat adatai DIV-ekbe kerülnek, és CSS-sel fogjuk elérni, hogy megjelenésben is valódi táblázatra hasonlítson. Ha ezt elértük, akkor az egyes töréspontoknál már könnyedén tudunk variálni a dobozok elrendezésével anélkül, hogy bármilyen tartalmat el kellene rejtenünk. A mintafeladatban például 1000px szélesség alatt a táblázat egyes sorai önálló dobozokká válnak, így minden tartalom megmarad és a legkisebb mobileszközön is kényelmesen olvasható lesz a tartalom.
A videóban létrehozott minta táblázatokat az alábbi gombra kattintva éred el.
Reszponzív táblázatok videó
