Tabelas quebrando layout

Publicado em: 26/04/2007

Autor: Roger Johansson
URL do original: http://www.456bereastreet...._too_wide/
Título original: How to prevent HTML tables from becoming too wide
Traduzido com autorização expressa do autor

Introdução

Tabelas, quando inseridas no layout de uma página, têm um comportamento diferente de elementos nível de bloco. Normalmente as tabelas se expandem além de sua largura especificada para acomodar seus conteúdos. Numa primeira análise, este comportamento parece ser bastante conveniente – e frequentemente o é – contudo pode trazer efeitos indesejados para o layout, tornando conteúdos ilegíveis ou mesmo quebrando o layout do site, especialmente no Internet Explorer.

Isto aconteceu comigo recentemente quando redesenhei um site construído à maneira antiga migrando-o para um layout baseado em CSS e transportei algumas tabelas existentes para o novo layout. Na maioria dos casos as tabelas encaixaram sem problemas no layout contudo algumas delas continham longas URLs que o navegador não conseguia quebrar dentro da célula. Eu precisei encontrar uma solução para o problema.

Veja o Exemplo 1 para ter uma idéia do problema.

O seu primeiro impulso provavelmente seria o de fazer o mesmo que eu fiz: procurar um hack CSS. Que tal declarar overflow:hidden? Nada aconteceu! não resolveu. Que tal declarar uma largura diferente para a tabela? Não! não funcionou. Mas, existe uma solução.

O segredo é usar a propriedade CSS table-layout. Ela pode assumir três valores: auto, fixed, e inherit. O valor inicial (default) é auto, onde a largura da tabela é determinada pelas suas colunas e sem bordas. Em outras palavras: a tabela expande-se se for necessário.

Para minha completa surpresa esta propriedade é suportada pela maioria dos navegadores

O que queremos usar é table-layout:fixed. Bam! Agora sim, a tabela assume a largura que foi especificada nas CSS. Nem mais, nem menos. E, para minha grande surpresa isto é suportado pela maioria dos navegadores. O navegador com alguma importância que não suporta é o IE/Mac, e mesmo assim a importância deste navegador está caindo rapidamente. Confira você mesmo no Exemplo 2.

O passo seguinte é decidir o que fazer com conteúdos que agora não se encaixam na tabela. Se a tabela contém apenas textos a declaração word-wrap:break-word (word-wrap constante das CSS3 Text Effects Module) forçará o navegador a quebrar as palavras quando necessário para evitar o overflow do texto na tabela. O resultado pode ser visto no Exemplo 3.

Lamentavelmente esta declaração atualmente só funciona no IE/Win, Safari, e Shiira (imagine só… IE/Win, até mesmo a versão 6, está à frente do Firefox no suporte a uma propriedade CSS).

É necessário que os navegadores que não suportam word-wrap assumam o compromisso de corrigir esta falta de suporte. Há duas escolhas para os navegadores que não suportam: deixar que o conteúdo extrapole a tabela e colida com o conteúdo ao lado ou declarar overflow:hidden para esconder o conteúdo que extrapola a tabela. A solução a adotar depende de cada caso. Eu optei pela solução do overflow:hidden, cujo efeito pode ser visto no Exemplo 4.

Lamento se esta é uma notícia velha para vocês, mas como eu descobri isto somente agora achei que seria uma boa compartilhar.

Atualização (2007-04-26): OK, Eu fiz alguns testes com overflow:auto. O único navegador que se comportou apropriadamente com esta declaração foi o Safari (e os baseados no WebKit). Eles se comportaram exatamente como esperado para overflow:auto nas células da tabela, mostrando uma barra de rolagem horizontal quando necessária. Nos demais navegadores nada aconteceu ou aconteceram coisas estranhas.

Em outras palavras podemos dizer que o suporte para overflow:auto nestes casos não é uma boa opção.

Testei também overflow:hidden para células contidas no miolo da tabela (não a última célula de uma linha, como nos exemplos) e tudo funcionou apropriadamente.


Nota do Maujor

Fazendo algumas experiências com os códigos propostos pelo autor da matéria descobri uma maneira de não se perder o conteúdo em overflow nos navegadores standards. A solução consiste em introduzir uma DIV container para a tabela e declarar overflow:auto para esta DIV em lugar de declarar overflow diretamente na tabela sem sucesso, como relatou o autor no título Atualização (2007-04-26). Adicionalmente, retirei a borda da tabela e coloquei na DIV. Minha solução pode ser vista no Exemplo 3 - Modificado.

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil