Jak udělat responzivní tabulku

Mezi strašáky každého front-end vývojáře patří bezesporu tabulka. Při jedné z posledních zakázek, jsem se s ní po dlouhé době sám setkal. Když jsem začínal s programováním, učil jsem se, že tabulka je něco zastaralého, co by se nemělo moc používat. Jako jedinou možnost responzivity jsem znal rolování do boku. To není špatně, jen to není moc hezké a moderní. Díky modernímu CSS se s tím dá opravdu hodně vyhrát.

Připravil jsem malý příklad, kde používám Media Queries pro změnu vzhledu tabulky na mobilním zařízení. Hned na začátku bych rád upozornil na důležitou věc. Vždy používejte každý tag nebo komponentu k tomu, k čemu slouží. Tabulka se má používat k přehlednému třídění dat, nikoli třeba k vytváření layoutu webu.

Osobně rád používám sémantické tagy thead a tbody. Díky nim se vše snáze styluje. Když si tedy tabulku hezky vyladíte pro monitor, použijte vývojářské nástroje v prohlížeči. Přepněte se do zobrazení na mobilním zařízení a začněte tabulku zmenšovat. Zaznamenejte si hodnotu kdy se začne bortit. Tu si pak nastavte jako max-width u Media Queries.

Tak, a teď to hlavní. Určitě nastavíme u thead display none, jednoduše ji zneviditelníme. Tagu tr nastavíme display block a tagu td display flex. A na závěr je pro nás nejdůležitější pseudo-element ::before. Ten nám právě nahradí zneviditelněnou hlavičku. Podrobnosti si samozřejmě můžete dohledat v kódu.

Tím máme takové rychlé shrnutí za sebou. Ode mě je to dnes zatím vše…