O que é
Uma tabela com muitas colunas, ou uma construída com medidas fixas em vez de flexíveis, é naturalmente larga — o que não é problema num ecrã de computador, mas não encolhe para caber num ecrã de telemóvel muito mais estreito, ao contrário da maioria do resto do conteúdo numa página bem construída. Em vez disso, ou obriga toda a página a deslocar-se para os lados, ou fica desconfortavelmente espremida e difícil de ler.
Por que importa
O deslocamento horizontal é uma das coisas mais incómodas com que um visitante se pode deparar num telemóvel — quebra o padrão normal de deslocamento vertical que as pessoas esperam em qualquer outro lugar da web, e é fácil não reparar em conteúdo que fica mesmo fora do ecrã à direita, sem sequer perceber que ali está algo. Numa página que, de resto, é perfeitamente adaptada a dispositivos móveis, uma única tabela larga e sem tratamento pode ser o único fator que faz toda a experiência parecer avariada a um visitante no telemóvel.
Como corrigir
- Identifica quais as tabelas do teu site que têm muitas colunas ou foram construídas com larguras fixas em pixels em vez de flexíveis.
- Envolve cada tabela larga num contentor com a propriedade CSS
overflow-x: auto— isto mantém o layout da própria tabela intacto, mas permite ao visitante deslocar apenas essa tabela para os lados com um gesto do dedo, em vez de deslocar a página inteira. - Para tabelas com muitas colunas, considera antes um padrão de tabela responsiva — por exemplo, transformar cada linha num cartão individual e identificado em ecrãs estreitos, em vez de manter sempre o layout tradicional em grelha.
- Se usares um criador de sites, verifica se o bloco de tabela já tem um interruptor de "deslocamento móvel" ou "responsivo" antes de construíres uma solução personalizada.
- Testa a correção num ecrã de telemóvel estreito real (ou no modo de pré-visualização móvel do teu navegador), e não apenas redimensionando uma janela de computador, já que o deslocamento por toque se comporta de forma diferente do rato.