Olá a todos.
Eu sei que faz tempo que não posto nada, mas é que ultimamente esta tudo bem corrido para mim. Trabalhando em uma consultoria, não tenho muito tempo para escrever artigos durante o dia, porém no meu tempo vago escrevo artigos sobre outros temas e os publico no meu site http://www.phpaulo.com.br, também os público em alguns outros sites.
Chega de desculpas e vamos a parte que interessa.
Problema
Hoje devido a uma tabela ter muitas colunas, ela estourava o layout do site, sugeri sem nem saber se é possível para que colocassemos as colunas na vertical. Eu já conheço a técnica do Image-Replacement, mas não gostou muito de usar, somente em casos bem especificos, pois fico dependendo do pessoal da área de design realizar a alteração, “Odeio Esperar”.
Este sistema aqui, apesar de ser web, deve rodar da melhor forma possível no IE 7+, nos outros navegadores não tem necessidade de funcionar 100% (particularmente não concordo com isso, mas a empresa quer, então… 
)
Solução
Pesquisando na Google, encontrei o blog do MSDN (Microsoft Developer Network) falando como escrever na vertical, eu gostei bastante disso pois resolvia todos os meus probrlemas, já que não preciso me preocupar com outros navegadores.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>Escrevendo na vertical para IE – aprendacss.wordpress.com </title>
<style type=”text/css”>.verticalText{
font-family:Arial,Helvetica,sans-serif;
color:#000000;
font-size:12px;
writing-mode: tb-rl; filter: flipv() fliph();
}table tr th, table tr td {
border: 1px solid #000;
}table {
border-collapse: collapse;
}</style>
</head>
<body>
<table>
<tr>
<th><span>Coluna 1</span></th>
<th><span>Coluna 2</span></th>
<th><span>Coluna 3</span></th>
<th><span>Coluna 4</span></th>
<th><span>Coluna 5</span></th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
Conclusão
Essa técnica é muito boa se você precisa fazer algo especifico para o IE. Caso precise fazer para funcionar em todos navegadores, sugiro o Image-Replacement que é a mais segura em termos de renderização.
