Horizontální posun vs. přepínání do karet

Porovnání dvou nejčastějších strategií pro mobilní zobrazení tabulek. Která řešení se hodí pro jaká data a jak ovlivňují uživatelský dojem.

12 min Střední Březen 2026

Notebook s náčrtem rozvržení tabulky vedle šálku kávy na dřevěném stole

Proč volba strategie záleží

Tabulky jsou skvělé pro zobrazení strukturovaných dat na desktopu. Ale když se dostanete na mobilní obrazovku, která má třeba 360 pixelů na šířku, všechno se hroutí. Musíte se rozhodnout: necháte uživatele scrollovat vodorovně, nebo transformujete data do něčeho úplně jiného?

To není jen technická otázka. Ovlivňuje to, jak rychle lidé najdou informace, které hledají. Zda se budou vracet na váš web. Jestli si myslí, že je to profesionální nebo zastaralé. Jsme se podívali na stovky webů a shromáždili jsme praktické poznatky, které vám pomůžou se rozhodnout správně.

Horizontální posun

Původní struktura zůstane stejná, uživatel se posouvá vodorovně. Hodí se pro jednoduché tabulky s málo sloupci.

Přepínání do karet

Každý řádek se změní na kartu. Čtení je přirozené, ale design vyžaduje více práce a testování.

Hybridní přístup

Kombinace obou metod. Zobrazíte nejdůležitější sloupce, zbytek se scrolluje. Nejflexibilnější řešení.

Horizontální posun: co byste měli vědět

Horizontální scroll je nejrychlejší cestou. Nemusíte měnit HTML, přidáte jen CSS. Tabulka zůstane tabulkou. Na mobilu se prostě “zmáčkne” a uživatel se posouvá prstem.

Funguje to skvěle, když jsou data jednoduchá. Tři sloupce — super. Pět sloupců — stále ok. Ale když máte deset sloupců nebo dlouhé hodnoty v buňkách, uživatel skončí frustrovaný. Musí si pamatovat, co viděl v prvním sloupci, protože už ho nevidí.

Kdy je horizontální scroll dobrý nápad:

Máte 2–4 sloupce
Data jsou krátká (čísla, jednoduché texty)
Uživatelé vědí, co hledají (například tabulka cen)
Nechcete měnit existující kód

Mobilní obrazovka s tabulkou, která se posouvá vodorovně, s prstem naznačujícím posun

Přepínání do karet: druhá cesta

Když transformujete řádky tabulky na karty, změní se vše. Každý řádek má vlastní prostor, vlastní vizuální hranici. Na mobilu vypadá to lépe — návštěvník nemusí scrollovat vodorovně.

Problém? Je to práce. Musíte přepsat HTML. Musíte navrhnout, jak karta vypadá. Jaké údaje jsou vidět první. Jaké se skryjí za tlačítko “Více”. Testujenímu s různými délkami textu. Ale když to uděláte správně, je to opravdu pohodlné pro uživatele.

Výhody karty:

Bez horizontálního scrollu — všechno je vidět svisle
Pěkný, moderní vzhled
Každý řádek má dostatek místa
Snadné přidání detailů nebo akcí

Mobilní zařízení zobrazující seznam karet s daty, každá karta má popisky a tlačítko pro více informací

Na co si dát pozor

Tato porovnání vycházejí z praktických zkušeností a testování s uživateli. Každý projekt je jiný. To, co funguje pro e-shop, nemusí fungovat pro analytické nástroje. Vždycky testujte s vašimi uživateli. Ptejte se jich přímo. Sledujte, jak data čtou. Některým lidem se líbí scroll, jiným jsou karty. Ideální řešení je to, které se hodí právě vaším lidem.

Návrhář pracuje na počítači, má notebook vedle sebe s náčrty rozvržení tabulky, v místnosti je přirozené světlo

Jak se rozhodujete správně

Nejlepší přístup? Začněte odpovědí na tři otázky. První: Kolik sloupců máte? Druhá: Jaké jsou průměrné délky dat v každém sloupci? Třetí: Co je nejdůležitější informace pro uživatele — co musí vidět hned?

Pokud máte tři sloupce s krátkými daty a nejdůležitější informace je v prvním sloupci, horizontální scroll je nejrychlejší řešení. Vytvořete jej za hodinu a bude fungovat.

Pokud máte osm sloupců, dlouhé texty a data jsou strukturovaně propojená (například osoba s více kontakty), karty jsou lepší. Investujete do designu, ale uživatelé vám to vrátí lepší zkušeností a vyšší konverzí.

Praktická rada

Když si nejste jistí, vyberte hybridní přístup. Zobrazíte nejdůležitější sloupce (ty, která vidí bez scrollu), zbytek se scrolluje vodorovně. Nejlepší z obou světů. Uživatel má jasný přehled, ale není přehlcený informacemi.

Na co si vzít domů

Horizontální scroll a karty nejsou správné nebo špatné. Jsou to nástroje pro různé situace. Scroll je rychlý a jednoduchý. Karty jsou pohodlné a krásné. Váš úkol je poznat, které řešení se hodí vašim datům a vašim uživatelům.

Nezapomeňte: nejlepší design je ten, který si nikdo neuvědomí. Uživatelé by měli příjemně číst data a najít, co potřebují. Pokud si vybavují, že data čtou, cosi se pokazilo. Vyzkoušejte obě metody. Testujte je s opravdovými lidmi. A pak se rozhodněte. Neexistuje jediná správná odpověď — existuje jen odpověď, která je správná pro vás.

Zjistit víc o responzivních tabulkách