Texto vertical para títulos em tabelas com CSS

Em tabelas complexas com muitas colunas é comum encontrar problemas com títulos muito compridos que causam que a tabela se estique para além da largura disponível do ecrã. Uma solução para este problema é usar texto na vertical para os títulos.

Também podemos fazer isto usando imagens, mas perdemos os benefícios do texto:

seleccionável,
redimensionável,
facilidade de aplicar estilos e actualizar,
facilidade de ser gerado dinamicamente.

Com o atributo transform de CSS é possível rodar coisas verticalmente.

div.vertical
{
 transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg); /* Safari/Chrome */
 -moz-transform: rotate(-90deg); /* Firefox */
 -o-transform: rotate(-90deg); /* Opera */
 -ms-transform: rotate(-90deg); /* IE 9 */
}

Para o Internet Explorer 8 ou inferior é necessário fazer isto de forma diferente:

div.vertical
{
 writing-mode: tb-rl;
 filter: flipv fliph;
}

Tem algumas limitações. Os browsers aplicam a transformação no fim, por isso é necessário ter isto em conta e ajustar a largura/altura. Se não ajustarem o tamanho do contentor, a sua largura/altura será do tamanho do texto antes de ser rodado.

No caso da tabela, vamos usar uma div dentro de cada célula, para termos maior controlo.

<table>
 <thead>
  <tr>
   <th class="vertical"><div class="vertical">Really long and complex title 1</div></th>
   <th class="vertical"><div class="vertical">Really long and complex title 2</div></th>
   <th class="vertical"><div class="vertical">Really long and complex title 3</div></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Example</td>
   <td>a, b, c</td>
   <td>1, 2, 3</td>
  </tr>
  (...)
 </tbody>
</table>

Devido às diferenças de rendering entre o IE8 e inferior e os outros browsers, vamos usar duas stylesheets diferentes.

Para IE8 e abaixo:

div.vertical
{
 position: relative;
 height: 210px;
 width: 45px;
 margin-left: 0;
 padding-right: 10px;
 writing-mode: tb-rl;
 filter: flipv fliph;
}

th.vertical
{
 padding-bottom: 10px;
 vertical-align: bottom;
}

Para outros browsers:

div.vertical
{
 margin-left: -85px;
 position: absolute;
 width: 215px;
 transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg); /* Safari/Chrome */
 -moz-transform: rotate(-90deg); /* Firefox */
 -o-transform: rotate(-90deg); /* Opera */
 -ms-transform: rotate(-90deg); /* IE 9 */
}

th.vertical
{
 height: 220px;
 line-height: 14px;
 padding-bottom: 20px;
 text-align: left;
}

Um screenshot do resultado final:

PS: Se usarem este código num ficheiro local em IE8, vão receber um aviso por causa do filtro que está a ser usado. Podem autorizar sem problema. Este aviso não é mostrado se colocarem os ficheiros num servidor.

Texto vertical para títulos em tabelas com CSS

Artigos relacionados