Responsivní tabulky

Přestože éra tabulkových layoutů a jejich nahrazení <div>y (CSS layouty) způobila u mnoha tvůrců tabulkový odpor, pořád stará dobrá tabulka má na stránce místo.

Problém ale nastává při snaze vytvořit responsivní web. Na malou obrazovku se těžko vícesloupcová tabulka vejde. Co stím?

Zjednodušení tabulky

První možnost je zkusit tabulku zjednodušit, tj. některé sloupce vypustit nebo texty odkazů/tlačítek nahradit obrázky (ikonami). Ideálně s co nejmenší ztrátou informací.

Vezmeme-li si jako příklad tabulku uživatelů.

JménoE-mailPopisFunkceAkce
Běžný Uživatel bezny@uzivatel.cz Popis běžného uživatele. Uživatel
Franta Fytopuf franta@fytopuf.cz Popis běžného fytopufu. Rostlinář
Nejlepší Trenér strouhanka@kobercovka.cz Dlouhý popis nejlepšího trenéra. Reservoár
Žerou Děti junior@plzen-wd40.cz Popis Klaun
  • Popis můžeme na malé obrazovce (ukázka – zmenšit pod 500px).
  • Funkci lze znázornit podbarvením buňky anebo ikonou.
  • Obdobně akce mohou být na mobilu jen menší ikonou.

„Vypnout“ nebo přestylovat celé sloupce jde nejlépe po staru nastavením tříd pro všechny buňky nebo přes selektor n-tého potomka (více o stylování tabulek je na samostatné stránce).

th:nth-child(3), td:nth-child(3) {display: none;}

Výše uvedený kód pro zmizení třetího sloupce sice bude fungovat až od IE 9, ale to nás při optimalisaci pro mobilní zařízení nemusí moc trápit. Starší IE je na mobilech raritní.

Horizontální posuvník

Asi nejjednodušší řešení je u tabulky, která se na obrazovku nevejde, zobrazit posuvník. Zabrání se tak rozpadnutí stránky, ale použitelnost nebude nejelepší.

Stačí k tomu tabulku obalit <div>em s max-width: 100%; overflow: auto:

JménoE-mailPopisFunkceAkce
Nejlepší Trenér strouhanka@kobercovka.cz Dlouhý popis nejlepšího trenéra. Reservoár
Žerou Děti junior@plzen-wd40.cz Popis Klaun

„Rozlámání“ tabulky

Pokud zjednodušení není možné nebo dostatečné, nezbývá než tabulku zrušit. Zkrátka ji rozlámat do podoby, že jednotlivé řádky budou pod sebou.

JménoE-mailPopisFunkceAkce
Běžný Uživatel bezny@uzivatel.cz Popis běžného uživatele. Uživatel
Franta Fytopuf franta@fytopuf.cz Popis běžného fytopufu. Rostlinář

Zrušení tabulky je možné třeba nastavením display: block pro všechny tabulkové elementy (nezapomínat na <tbody>).

@media screen and (max-width: 600px) {
  /* rozlámání tabulek */
  td, th, tr, thead, tbody, tfoot, table {display: block} 
}

Doplnění popisků

Pokud by srozumitelnost tabulky byla bez popisků nedostatečná, můžeme je CSS vlastností content.

A to buď CSS deklarací ve stylu:

.popisky td:nth-of-type(1):before {content: "Popis první buňky"}
.popisky td:nth-of-type(2):before {content: "Popis druhé buňky"}

Nebo přiřazením popisků do vlastních atributů všech buněk a následné dolování přes content: attr(vlastni-atribut). To by mohlo zajistit i pár řádku JavaScriptu.

Transformace tabulky

Poslední možnost je tabulku projít skriptem a převést ji třeba na definiční seznam (značka <dl>), případně ji převést už na straně serveru při detekci mobilního prohlížeče.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Responsivní komentáře

Responsivní komentáře

Jak některé části stránky načítat jen při určité velikosti obrazovky.

Obtékané boxy s proměnlivou šířkou

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

Responsivní menu

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

Responsivní CSS mřížka

Responsivní CSS mřížka

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

CSS @media queries

CSS pravidlo @media

Pravidlo @media se používá k omezení platnosti CSS jen za určitých podmínek.

Komentáře