Skrývání sloupců: Která data jsou nejdůležitější

Strategie výběru, které sloupce zobrazit na mobilních zařízeních. Jak určit prioritu dat a zajistit, aby uživatelé viděli to, co je pro ně relevantní.

10 min čtení Začátečník Březen 2026

Počítač zobrazující tabulku s vybraným sloupcem dat na obrazovce

Problém s příliš mnoha sloupci

Když navrhujete tabulku pro web, obvykle ji vytvoříte pro velké obrazovky. Máte místo, tak přidáte všechna data, která vám přijdou užitečná. Problém? Na mobilu se to všechno nevejde. Nemůžete to prostě zmenšit – text by byl nečitelný a sloupce by se překrývaly.

Tady přichází na řadu strategie skrývání sloupců. Není to o tom vymazat data – jde o to vybrat, která data jsou pro mobilního uživatele v daném okamžiku nejdůležitější. To je umění i věda zároveň.

Klíčový princip

Mobilní uživatelé nechápou své rozhodnutí jako “chci vidět 5 sloupců místo 12”. Chtějí vidět informace, které je zajímají. Vaše práce? Zjistit, které to jsou.

Jak určit prioritu dat

Nejlepší způsob, jak určit, která data jsou důležitá? Ptejte se uživatelů. Vážně. Pokud máte tabulku s údaji o produktech (název, cena, skladem, kategorie, poslední aktualizace, prodejce), nebudete všechno potřebovat najednou.

Na mobilním telefonu hledá uživatel obvykle: co to je, kolik to stojí a je to skladem? Ostatní informace jsou druhořadé. Poslední aktualizace? Pravděpodobně ji vůbec nepotřebuje. Kategorie? Má ji už v hlavě z navigace, kterou právě použil.

Tři otázky, které si pokládejte

Co potřebují vědět? Základní identifikace položky (název, ID, obrázek).
Co je ovlivňuje v rozhodování? Cena, dostupnost, hodnocení – věci, které rozhodují o akci.
Co je zbytečné v tomto kontextu? Technické detaily, meta-informace, administrativní údaje.

Diagram ukazující prioritu dat v tabulce – nejdůležitější sloupce v centru

Pozor na jediný přístup

Ne všechny aplikace jsou stejné. E-shop má jiné potřeby než finanční nástroj nebo zdravotnická aplikace. Měli byste otestovat vaše řešení s reálnými uživateli a sledovat, na co klikají a co ignorují. Není to teoretické cvičení – jsou to reálná chování lidí s mobilními telefony.

Mobilní obrazovka zobrazující tabulku se skrytými sloupci a akcí pro rozbalení

Praktické strategie skrývání

Když už víte, která data jsou důležitá, jak je v kódu implementujete? Existuje několik přístupů, z nichž každý má své místo.

CSS media queries

Nejjednodušší řešení. Použijete @media dotazy a skryjete sloupce pod určitou šířkou. Na mobilu (třeba pod 768px) se zobrazí jen důležité sloupce. Zbývající sloupce prostě zmizí pomocí display: none . Není to složité a funguje to.

Problém? Uživatel ty skryté informace vůbec nevidí. Pokud chce nějaký skrytý sloupec zjistit, je pryč. To je v pořádku pro informace, které opravdu nikdy nepotřebuje, ale pro data jako “poznámka” nebo “ID” to může být frustrující.

Rozšiřitelné řádky a dodatečné informace

Chytřejší přístup? Skryjte sloupce, ale dejte uživateli možnost je vidět. Obvyklý vzor: řádek tabulky se zobrazuje zjednodušeně, ale kliknutím na něj se rozbalí a zobrazí všechny informace. Jako malý accordion pro každou položku.

Tímto způsobem neukazujete 12 sloupců, ale jen 3–4 nejdůležitější. Zbývajících 8–9 sloupců je dostupných, ale nejsou na výšku. Mobilní uživatel vidí to, co potřebuje, a pokud chce více detailů, může je snadno získat.

Příklad struktury

Na mobilu vidí: název, cena, dostupnost. Klikne na řádek zobrazí se fotka, popis, číslo SKU, poslední aktualizace. Všechno je tam, ale strukturované tak, aby se na malé obrazovce vešlo.

Příklad rozbalitelného řádku tabulky s dodatečnými informacemi

Příklad přepnutí na režim karet na mobilním zařízení

Převod na karty místo tabulky

Někdy není tabulka nejlepší forma pro mobil. Místo skrývání sloupců můžete změnit celý layout. Na počítači: tabulka se sloupci. Na mobilu: každý řádek se změní na kartu. Každá karta zobrazuje jméno v titulku a pod ním klíčové informace.

Je to často nejlépe čitelné řešení. Uživatel vidí jednu položku najednou, ne 12 sloupců vedle sebe. Data jsou organizovaná hierarchicky – nejdůležitější informace nahoře, zbývající detaily níže. Není to skrývání dat, je to jejich přeformátování pro daný prostředí.

Jaký přístup vybrat? Závisí na datech. Tabulka s velmi krátkými hodnotami? Rozšiřitelné řádky jsou fajn. Bohaté informace v každé položce? Karty jsou lepší.

Shrnutí: Vyberete správně

Skrývání sloupců není o tom, co vymazat. Jde o to pochopit, co je uživatelům potřebné v každém okamžiku a na každém zařízení. Začněte analýzou – která data skutečně ovlivňují rozhodování? Která jsou doplňující? Která jsou úplně zbytečná?

Potom zvolte správný přístup. Jednoduchý CSS display: none je snadný, ale rozšiřitelné řádky jsou uživatelsky přívětivější. Převod na karty? Nejčastěji nejlépe čitelný. Všechno má místo – vyberte podle svých dat a svých uživatelů.

A nezapomeňte: otestujte s reálnými lidmi. To vám řekne víc než jakýkoli článek. Uvidíte, na co klikají, co ignorují a co jim chybí. To je nejlepší průvodce pro vaši rozhodnutí.