Horizontální posun vs. přepínání do karet
Porovnání dvou nejčastějších strategií pro mobilní zobrazení tabulek. Která řeší vašeho problém lépe?
Přečíst článekResponzivní tabulky: Praktické příklady a kód
Hotové řešení pro převod tabulky na mobilní zařízení pomocí CSS a HTML. Příklady pro všechny tři hlavní přístupy s podrobným vysvětlením.
Proč jsou responzivní tabulky důležité
Tabulky jsou jedním z nejčastějších prvků webů. Obsahují data, která se musí zobrazit přehledně — a to nejen na velkém monitoru, ale také na mobilu. Problém je, že standardní tabulka s deseti sloupci se na 375px displeji prostě nevejde.
Máte tři hlavní možnosti: horizontální scroll, skrytí sloupců nebo převod na karty. Každá má své výhody. V tomto návodu vám ukážeme kód pro všechny tři přístupy, aby jste si mohli vybrat, co vyhovuje vašim datům.
3
hlavní přístupy
100%
kompatibilní kód
5+
příkladů k vyzkoušení
Přístup 1: Horizontální posun
Nejjednodušší řešení. Tabulka zůstane beze změny, ale na mobilu se jí dá posunout vlevo a vpravo. Uživatel vidí všechny sloupce, jen ne všechny najednou.
Výhoda: Kód je minimální. Nevýhoda: Na mobilu se posunuje, což není všem přívětivé. Hodí se pro tabulky s málo řádky, kde je scroll intuitivní.
CSS:
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
min-width: 100%;
border-collapse: collapse;
}
Tip:
Vlastnost
-webkit-overflow-scrolling: touch;
zajistí hladký scroll na iPhonech.
Přístup 2: Skrytí sloupců podle priority
Pokud víte, která data jsou nejdůležitější, můžete na mobilu skrýt zbytečné sloupce. Uživatel vidí jen to, co potřebuje. Při kliknutí nebo skrolování vpravo se mohou další sloupce objevit.
Výhoda: Čistý, přehledný vzhled. Nevýhoda: Vyžaduje rozhodnutí, které sloupce jsou „zbytečné”. Vhodné pro tabulky s 8+ sloupci.
CSS:
@media (max-width: 768px) {
.column-secondary,
.column-tertiary {
display: none;
}
table {
width: 100%;
}
}Nejlepší pro: Seznamy objednávek, statistiky prodejů, plány předplatného.
Poznámka k kompatibilitě
Všechny příklady v tomto návodu jsou kompatibilní se všemi moderními prohlížeči (Chrome, Firefox, Safari, Edge). CSS Grid a Flexbox se podporují v 98% prohlížečů. Kódy byly testovány na zařízeních od iPhone SE po Samsung Galaxy S24.
Přístup 3: Převod na karty
Nejflexibilnější řešení. Na mobilu se tabulka změní na řadu karet, kde je každý řádek samostatná karta. Všechna data jsou vidět, jen jinak uspořádaná.
Výhoda: Skvělý vzhled na všech zařízeních, data se nečtou zleva doprava. Nevýhoda: Vyžaduje více HTML kódu a CSS. Vhodné, když máte čas na správné implementaci.
HTML struktura:
<div class="card-container">
<div class="data-card">
<div class="card-row">
<span class="label">Jméno</span>
<span class="value">Jan Novák</span>
</div>
<div class="card-row">
<span class="label">Email</span>
<span class="value">[email protected]</span>
</div>
</div>
</div>
CSS:
@media (max-width: 768px) {
.card-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.data-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1rem;
background: #fff;
}
.card-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid #f5f5f5;
}
}
Praktické tipy pro responzivní tabulky
Testujte na reálných zařízeních
Chrome DevTools je skvělý, ale není to totéž. Vyzkoušejte na skutečném iPhonu nebo Androidu. Scroll, touch, orientace — všechno se chová jinak.
Vyzdvihněte nejdůležitější data
Vždy by měl být vidět alespoň jeden klíčový sloupec — ID, jméno nebo datum. Uživatel by měl vědět, na jaký řádek kouká.
Správné záhlaví tabulky
Na mobilu by mělo být záhlaví vidět pořád. Používejte
position: sticky; top: 0;
aby se během scrollu neztrácelo z dohledu.
Konsistentní barvy a typografie
Tabulka by měla vizuálně pasovat k vašemu webu. Použijte stejné barvy, fonty a rozestupy jako jinde. Kontrastní text musí být čitelný na všech barvách.
Závěr: Vyberte si svůj přístup
Neexistuje jediná správná odpověď. Horizontální scroll je nejrychlejší na implementaci. Skrývání sloupců je nejčistší pro jednoduché seznamy. Karty jsou nejflexibilnější, když máte čas.
Nejdůležitější je testovat. Zkusujte kód s vašimi daty na skutečném mobilu. Uživatelé vám řeknou, jestli jim to vyhovuje.
Všechny tři příklady jsou výše a připravené k použití. Prostě je zkopírujte do svého projektu a upravte barvy a fonty. Odpovídají moderním standardům a fungují na 98% zařízení.