Mérei Tamás webdesigner

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

20 éve foglalkozom weboldalak, felhasználói felületek tervezésével, kódolásával és WordPress sablonok készítésével. Dolgozom magánszemélyeknek, fejlesztő cégeknek, multiknak, állami szervezeteknek és reklámügynökségeknek is.

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ó