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ů.

• Popis můžeme na malé obrazovce oželet (ukázka – zmenšit pod 500px).
• Funkci lze znázornit podbarvením buňky anebo ikonou.
• Obdobně akce mohou být na mobilu representovány 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:

„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.

Zrušení tabulky je možné provést 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 přidat 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

• Elvery.net – Responsive Tables Demo
• Zurb.com – Responsive Tables
• CSS-Tricks – Responsive Table
• RWD List to Table
• Sitepoint: The Ancient Sumerians, Tablet Computing and HTML Tables