Tabelas quebrando layout

Crédito: essa matéria é uma tradução e foi escrita por Roger Johansson. URL do original: https://www.456bereastreet...._too_wide/

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 devemos 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 Text 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.

Nota do Maujor: Este exemplo mostra a solução atual para o problema das tabelas quebrando layout

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.

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.