Mérei Tamás webdesigner
Helló!Mérei Tamás vagyok, webdesigner

Weboldalak és felhasználói felületek tervezésével és kódolásával foglalkozom. Dolgozom magánszemélyeknek, vállalkozásoknak, fejlesztő cégeknek és reklámügynökségeknek.

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.

forráskód

Reszponzív táblázatok videó

Reszponzív táblázatok videó