Contexto
Tabelas dependem da relação entre linhas e colunas. Em telas estreitas, simplesmente reduzir sua largura pode cortar valores, comprimir textos e dificultar comparações. A solução responsiva deve ser escolhida conforme a tarefa: preservar a grade quando a comparação entre colunas for essencial ou reorganizar a apresentação quando cada registro puder ser compreendido separadamente.
Comece identificando o que a pessoa precisa fazer com os dados. Não existe uma única transformação adequada para todas as tabelas.
Mantenha a tabela com rolagem local quando a comparação for essencial. Coloque a grade em um contêiner com rolagem horizontal, preserve cabeçalhos e mantenha o restante da página ajustado à largura da tela.
Empilhe linhas quando cada registro funcionar de forma independente. Repita visualmente o rótulo de cada valor e preserve a associação programática entre cabeçalhos e células.
Use uma lista quando poucos atributos forem suficientes. Priorize as informações essenciais para a decisão e leve dados secundários para detalhes expansíveis ou para uma página própria.
Reduza colunas antes de comprimir conteúdo. Remova redundâncias, encurte rótulos e defina quais atributos precisam estar visíveis no mobile.
Preserve orientação e ações. Considere cabeçalhos ou primeira coluna fixos quando isso ajudar, mantenha seleção, ordenação e ações disponíveis e torne a possibilidade de rolagem perceptível.
Teste com dados reais. Verifique a solução em larguras pequenas, zoom, textos longos e diferentes quantidades de linhas e colunas.
Regra prática
Se a pessoa precisa comparar valores entre colunas, preserve a grade em um contêiner rolável. Se precisa consultar cada item separadamente, uma apresentação empilhada ou uma lista pode ser mais clara. A adaptação deve manter o significado dos dados, não apenas fazê-los caber.
Porque isso importa?
Uma tabela comprimida aumenta o esforço para ler, comparar e manter a orientação. O problema é maior quando a pessoa precisa alternar continuamente entre rolagem horizontal e vertical ou quando os cabeçalhos deixam de indicar a que cada valor pertence.
O W3C reconhece que tabelas podem depender de uma organização bidimensional, mas orienta limitar a rolagem ao próprio componente, manter o restante da página responsivo e preservar as relações estruturais em todas as apresentações. Isso beneficia pessoas que usam zoom, telas pequenas, estilos personalizados e tecnologias assistivas.
Em testes de comércio digital, o Baymard observou que tabelas densas de produtos funcionam bem no desktop, mas perdem eficiência no mobile quando poucas colunas ficam visíveis e a comparação exige rolagem nos dois eixos. Nesses casos específicos, listas com os atributos essenciais podem apoiar melhor a consulta. Design Systems como USWDS e VTEX Shoreline complementam essa evidência com implementações de rolagem local, variações empilhadas e cabeçalhos fixos.
Quando usar?
- Rolagem horizontal: comparação entre várias colunas.
- Rolagem horizontal: dados numéricos densos ou matrizes.
- Linhas empilhadas: diretórios e registros independentes.
- Lista: poucos atributos essenciais por item.
- Detalhes expansíveis: informações secundárias extensas.
- Cabeçalho ou coluna fixa: tabelas longas em que a orientação se perde.
Quando evitar?
- Comprimir todas as colunas até o texto ficar ilegível.
- Ocultar dados essenciais sem alternativa.
- Transformar dados comparativos em cards desconectados.
- Criar rolagem horizontal na página inteira.
- Exigir gestos horizontais sem indicar conteúdo adicional.
- Empilhar células sem repetir seus rótulos.
- Duplicar versões desktop e mobile para leitores de tela.
Recomendações
Faça
- Priorize colunas essenciais.
- Preserve cabeçalhos e relações.
- Limite a rolagem à tabela.
- Indique conteúdo fora da tela.
- Mantenha ações acessíveis.
- Teste com zoom e teclado.
Evite
- Espremer todas as colunas.
- Cortar valores importantes.
- Ocultar ações no toque.
- Depender apenas do gesto.
- Quebrar a ordem de leitura.
- Criar rolagem na página.
