Tabulka přesahuje šířku displeje mobilního zařízení? Pro optimální nastavení zobrazení na mobilu je potřeba vložit tabulku do speciálního kontejneru. Díky tomu bude možné po tabulce přejet prstem do stran a uvidíte všechny sloupce v plné velikosti, aniž by se rozpadl vzhled zbytku stránky.

Proč je potřeba řešit tabulky na mobilních zařízeních

Tabulky patří mezi problematické prvky responzivního webdesignu. Na rozdíl od běžného textu mají pevně danou strukturu se sloupci, které se na menších displejích – jako jsou mobilní telefony – často nevejdou na šířku obrazovky.

Pokud není tabulka správně upravena, může se na mobilu zobrazit pouze její část, případně může rozbít rozložení celé stránky. Řešením je upravit zobrazení tabulky tak, aby zůstala čitelná a zároveň neovlivňovala vzhled webu.

Jak vypadá tabulka před úpravou (na mobilu)?
Tabulka je v základním nastavení neresponzivní a není viditelná celá. Na displeji telefonu se buď „usekne“ a návštěvník nevidí pravou část s cenami, nebo v horším případě násilně roztáhne šířku celého webu, což způsobí nepříjemné viklání stránky do stran.

Jak vypadá tabulka po úpravě (na mobilu)?
Po implementaci responzivního kontejneru zůstávají údaje čitelné a v plné velikosti. Uživatel může tabulku pohodlně posouvat prstem do stran, zatímco zbytek webové stránky drží pevně na svém místě a nerozpadá se.

V tomto návodu si ukážeme jednoduchý a funkční způsob, jak tabulky přizpůsobit pro mobilní zařízení pomocí HTML a CSS tak, aby byly použitelné i na malých displejích.

Postup nastavení:

1. Vložení tabulky do příspěvku: V administraci svého webu klikněte v editoru na ikonu tabulky a zvolte počet řádků a sloupců. Do vytvořené tabulky vepište své údaje.

2. Obalení tabulky kódem: Přepněte editor do režimu úpravy kódu (WYSIWYG/HTML) a kolem hotové tabulky vložte kontejner: před tabulku vložte <div class="tabulka-obal"> a za tabulku uzavírací značku </div>. Uložte změny.

3. Aktivace CSS stylu: Zkopírujte připravený CSS kód a vložte jej do Šablony - Upravit CSS. Následující kód zajistí, že se tabulka na mobilních zařízeních zobrazí s možností vodorovného posouvání.

CSS:

/* Nastavení pro responzivní posun tabulek */
.tabulka-obal {
  width: 100%;           /* Obal zabere celou šířku stránky */
  overflow-x: auto;      /* Povolí vodorovný posuvník, pokud je tabulka moc široká */
  -webkit-overflow-scrolling: touch; /* Zajistí plynulé posouvání prstem na iPhonech */
  margin-bottom: 20px;   /* Mezera pod tabulkou */
}

.tabulka-obal table {
  width: 100%;           /* Tabulka se snaží využít prostor */
  border-collapse: collapse; /* Hezčí vykreslení čar u tabulky */
  min-width: 600px;      /* Důležité: Nastaví minimální šířku, pod kterou se už začne posouvat */
}

4. Uložte změny kliknutím na tlačítko Uložit změny jako nový design a vyzkoušejte na svém telefonu, zda lze tabulkou plynule posouvat prstem do stran.

5. Přejděte v Galerii designů do Vlastní a klikněte na tlačítko Nastavit.