CSS tip: co se širokou tabulkou? Otočte její záhlaví

Určitě jste několikrát řešili problém, co s příliš širokou tabulkou na webové stránce. Jedním z řešení může být otočení popisků v záhlaví tabulky, takže zaberou méně místa. Dnes tento úkol snadno zvládnete jen s pomocí několika řádků CSS a výsledek plně postačí. Především u tabulek s širokým popiskem a krátkými hodnotami.
reklama

Vezměme si klasický příklad. Široká tabulka obsahující možná až zbytečně dlouhé popisky v záhlaví jednotlivých sloupečků, přitom však v jednotlivých buňkách je vždy jen pár znaků. Kdyby tak bylo možné se těch popisků zbavit, napadne vás. Jenže jejich zkrácení není vždy reálné.

Tabulka

Tuto situaci lze docela elegantně vyřešit pomocí 2D transformací v CSS. Jednoduše záhlaví tabulky otočíte. Změna o 90 stupňů není to pravé ořechové, tabulka pak není moc čitelná. Ale stačí i naklonění záhlaví o 45 stupňů a rázem získáte mnohem užší tabulku, která nepřijde o svou čitelnost. Nebo alespoň ne příliš.

Výchozí HTML pro tabulku

Připravte si jednoduchý HTML zápis pro tabulku. Záhlaví popisků dejte do značky <th>, každý popisek přitom bude ještě zanořen do značky <div> a dále do značky <span>. Z jakého důvodu, to ozřejmím za chvíli.

  <table>
  <tr>
    <th><div><span>První sloupeček tabulky</span></div></th>
    <th><div><span>Druhý sloupeček tabulky</span></div></th>
    <th><div><span>Třetí sloupeček tabulky</span></div></th>
    <th><div><span>Čtvrtý sloupeček tabulky</span></div></th>            
  </tr>
  <tr><td> x </td><td> x </td><td> x </td><td> x </td></tr>
  <tr><td> - </td><td> - </td><td> - </td><td> - </td></tr>  
  <tr><td> x </td><td> x </td><td> x </td><td> x </td></tr>
  <tr><td> - </td><td> - </td><td> - </td><td> - </td></tr>
  <tr><td> x </td><td> x </td><td> x </td><td> x </td></tr>
  <tr><td> - </td><td> - </td><td> - </td><td> - </td></tr>
  <tr><td> x </td><td> x </td><td> x </td><td> x </td></tr>
  <tr><td> x </td><td> x </td><td> x </td><td> x </td></tr>
  <tr><td> - </td><td> - </td><td> - </td><td> - </td></tr>
  <tr><td> x </td><td> x </td><td> x </td><td> x </td></tr>          
  </table>

2D transformace v CSS a otočení popisků sloupců v tabulce

No a nyní k samotné úpravě pomocí CSS. V ukázkovém kódu níže jsem připravil rychle nastavení písma v dokumentu, rámečkování buněk v tabulce a jejich vnitřní odsazení. Poté již následuje zápis úpravy záhlaví.

Záhlaví tabulky zbavíme zalamování řádků a nastavíme mu výšku. To je důležité kvůli tomu, že po otočení popisků by tyto pak mohly překrývat okolní obsah na stránce. Nastavením výšky buněk záhlaví tomu zabráníme.

Následuje úprava značek <div> v buňkách záhlaví tabulky. Důvod, proč neotáčíme přímo značku <th> je dán tím, že by přímá úprava buňky mohla výsledek rozsypat. Samotné otáčení se používá pomocí 2D transformace v CSS, vidíte dvojí zápis pro Chrome i pro ostatní prohlížeče.

Otočení je udáno pomocí funkce rotate() s nastavením počtu stupňů rotace (pro 45 tedy použijeme 360 – 45 = 315). Funkce translate() udává posun na souřadnicích X a Y. Nakonec nastavíme šířku DIVu v záhlaví.

Poslední zápis pro značku <span> v záhlaví zařizuje vykreslení spodního rámečku u každého záhlaví a jeho odsazení. Zadáním těchto pravidel přímo pro DIV byste nedosáhli požadovaného výsledku, kdy čáry mají navazovat na buňky tabulky a být přes celou délku popisku.

body{
  font-family: sans-serif;
  color: #444;
}
 
table{
  border-collapse: collapse;
}
 
td{
  border: 1px solid #0066cc;
  padding: 0.2em 0.5em;
  text-align: center;
}
 
th{
  white-space: nowrap;
  height: 135px;
  vertical-align: bottom;
  padding: 0;
}
 
th div{
  -webkit-transform: translate(20px, -8px) rotate(315deg);
  -ms-transform:  translate(20px, -8px) rotate(315deg);
  transform: translate(20px, -8px) rotate(315deg);
  width: 30px;
}
 
th div span{
  border-bottom: 1px solid #0066cc;
  padding: 0 1em;
  font-size: 0.8em;
}

A zde je výsledek:

Otočená tabulka

Tip na závěr: Nejsem si jist správností použití funkce translate(), vše sice sedí a popisek s čárou se přesune tak, aby pasoval na buňky tabulky. Ale je možné, že změnu pozice je možné řešit univerzálněji.

Více se o 2D transformacích dozvíte na stránce CSS3 2D Transforms.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru