Publicado por: Paulo Fernandes | 27/out/2009

Cabeçalho da Tabela na Vertical (somente IE )

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.

Anúncios

Responses

  1. Cara eu acho que para melhor vizualização e localização dos tutoriais, os titulos deviam ser BEM maiores.. tipo, exagera pra valer, fica muito interessante eu ja vi isso, e da um destaque bem legal.. vlw..

  2. Por mais que teimam, não podemos ignorar os outros navegadores, eles estão aí e vieram para ficar. O MSDN ja testemunhei eles apresentando soluções ridiculas, verdadeiras gambiarras. Só porque tio Bill quer assim.
    Estes dias vi um sistema que ia dar manutenção porem todas as paginas carregam um javascript se não for IE, não carrega o site, redirecionando uma pagina dizendo “seu navegador não pode abrir este site”. Como eu vou usar Firebug em tempo de execução? Pensei até em desabilitar o javascript, mas o sistema deixa de funcionar quase que totalmente sem javascript.
    As pessoas precisam ver o valor do CROSSBROWSER!

    • Concordo plenamente. Apenas coloquei essa solução para deixar documentado que se usar o IE e somente ele, dá para fazer assim.

      Existem casos em que o sistema deve rodar só no IE.

  3. vertical para qualquer navegador


    .verticaltext { color:#333;
    border:1px solid red;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:110px;
    width/**/:24px\9; /*ie8*/
    *width:24px; /*ie7*/
    _width:24px; /*ie6*/

    height:24px;
    height/**/:110px\9; /*ie8*/
    *height:110px; /*ie7*/
    _height:110px; /*ie6*/
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    font-size:24px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    }
    .verticaltext2 { color:#333;
    border:1px solid red;
    writing-mode:tb-rl;
    filter: flipv() fliph();
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:120px;
    width/**/:26px\9; /*ie8*/
    *width:26px; /*ie7*/
    _width:26px; /*ie6*/

    height:24px;
    height/**/:120px\9; /*ie8*/
    *height:120px; /*ie7*/
    _height:120px; /*ie6*/
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    font-size:24px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;

    }

  4. wooow, like your things about Cabeçalho da Tabela na plumb (somente IE ) « Aprenda CSS

  5. clica aonde vc vai escrever dentro da tabela e depois clica no lado direito do texto em direção do texto e escolha a direçao que vc quiser.

    • Respostas
      Cara eu acho que para melhor vizualização e localização dos tutoriais, os titulos deviam ser BEM maiores.. tipo, exagera pra valer, fica muito interessante eu ja vi isso, e da um destaque bem legal.. vlw..

      Por: Fabio em 10/nov/2009
      às 13:47:30

      Responder

      Por mais que teimam, não podemos ignorar os outros navegadores, eles estão aí e vieram para ficar. O MSDN ja testemunhei eles apresentando soluções ridiculas, verdadeiras gambiarras. Só porque tio Bill quer assim.
      Estes dias vi um sistema que ia dar manutenção porem todas as paginas carregam um javascript se não for IE, não carrega o site, redirecionando uma pagina dizendo “seu navegador não pode abrir este site”. Como eu vou usar Firebug em tempo de execução? Pensei até em desabilitar o javascript, mas o sistema deixa de funcionar quase que totalmente sem javascript.
      As pessoas precisam ver o valor do CROSSBROWSER!

      Por: Web Designer Raphael Figa em 11/jan/2010
      às 22:12:06

      Responder

      Concordo plenamente. Apenas coloquei essa solução para deixar documentado que se usar o IE e somente ele, dá para fazer assim.

      Existem casos em que o sistema deve rodar só no IE.

      Por: Paulo Fernandes em 21/mar/2010
      às 11:58:30

      Responder

      vertical para qualquer navegador

      .verticaltext { color:#333;
      border:1px solid red;
      writing-mode:tb-rl;
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -o-transform: rotate(90deg);
      white-space:nowrap;
      display:block;
      bottom:0;
      width:110px;
      width/**/:24px\9; /*ie8*/
      *width:24px; /*ie7*/
      _width:24px; /*ie6*/

      height:24px;
      height/**/:110px\9; /*ie8*/
      *height:110px; /*ie7*/
      _height:110px; /*ie6*/
      font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
      font-size:24px;
      font-weight:normal;
      text-shadow: 0px 0px 1px #333;
      }
      .verticaltext2 { color:#333;
      border:1px solid red;
      writing-mode:tb-rl;
      filter: flipv() fliph();
      -webkit-transform:rotate(-90deg);
      -moz-transform:rotate(-90deg);
      -o-transform: rotate(-90deg);
      white-space:nowrap;
      display:block;
      bottom:0;
      width:120px;
      width/**/:26px\9; /*ie8*/
      *width:26px; /*ie7*/
      _width:26px; /*ie6*/

      height:24px;
      height/**/:120px\9; /*ie8*/
      *height:120px; /*ie7*/
      _height:120px; /*ie6*/
      font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
      font-size:24px;
      font-weight:normal;
      text-shadow: 0px 0px 1px #333;

      }

      Por: Kleber em 9/nov/2010
      às 09:46:22

      Responder

      wooow, like your things about Cabeçalho da Tabela na plumb (somente IE ) « Aprenda CSS

      Por: Quinella em 11/ago/2011
      às 12:23:12

      Responder

      clica aonde vc vai escrever dentro da tabela e depois clica no lado direito do mouse em direção do texto e escolha a direçao que vc quiser


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: