Tabulka se zaoblenými rohy pomocí CSS3

Vytvořit tabulku se zaoblenými rohy pomocí CSS3 se zdá být jednoduchý úkol, ale co když potřebujeme mít zaoblené rohy u tabulky s nastaveným parametrem border-collapse: colapse? Jednoduše to prostě nejde. Chrome, FF nebo ostatní prohlížeče s jádrem Webkit zatím neumí zakulatit rohy pokud je tento parametr nastavený a to ani v případě, že border-radius aplikujeme na vnitřní elementy tabulky.

Nicméně pokud potřebujeme ohraničit vše rámečkem širším než 1px, stačí použít border-collapse: separate a šířky orámování jednotlivých elementů nadefinovat dle libosti.

Chtěl bych se tu ale zaměřit na situaci, kdy potřebujeme orámování právě 1px. Není to nic složitého, ale co už někdo vymyslel, může ušetřit čas druhému. Tak tedy výsledek by měl vypadat nějak takto:

HTML (obyčejná tabulka vygenerovaná WYSIWYG editorem v redakčním systému) :

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
  <thead> 
    <tr> 
      <th scope="col">hlavička1</th> 
      <th scope="col">hlavička 2</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td>data tabulky</td> 
      <td>další sloupec s daty</td>
    </tr> 
    <tr> 
      <td>data v druhém řádku</td> 
      <td>poslední buňka tabulky</td> 
    </tr> 
  </tbody> 
</table>

CSS (orámování elementů pouze z některých stran):

table {
  border-collapse: separate;
  border-width: 1px 0 0 1px;
  border-color: #194103;
  border-style: solid;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
table tr {
}
table tr th {
  border-width: 0 1px 1px 0;
  border-color: #194103;
  border-style: solid;
}
table tr td {
  border-color: #194103;
  border-style: solid;
  border-width: 0 1px 1px 0;
}

Toto by mělo vyřešit všechny naše problémy, ale opak je pravdou, protože rámeček jsme nastavovali až u buněk tabulky, které zakulacené nejsou. Tady přichází už konečně na řadu to kouzlo, díky kterému dosáhneme požadovaného výsledku.

table tr:first-child th:first-child {
    -moz-border-radius-topleft:7px;
    -webkit-border-top-left-radius:7px;
    border-top-left-radius:7px;
}
table tr:first-child th:last-child {
    -moz-border-radius-topright:7px;
    -webkit-border-top-right-radius:7px;
    border-top-right-radius:7px;
}
table tr:last-child td:first-child {
    -moz-border-radius-bottomleft:7px;
    -webkit-border-bottom-left-radius:7px;
    border-bottom-left-radius:7px;
}
table tr:last-child td:last-child {
    -moz-border-radius-bottomright:7px;
    -webkit-border-bottom-right-radius:7px;
    border-bottom-right-radius:7px;
}

Doufám, že toto někomu pomůže rychleji nastylovat tabulku podle jeho představ. Případné chyby nebo vylepšení můžete dát do komentářů.