Tabelas responsivas: como mostrar dados no celular sem rolagem infinita

Painéis, relatórios e sistemas administrativos vivem de tabelas. No desktop, funcionam bem. No celular, uma tabela com muitas colunas se torna difícil de ler — e muitos usuários de sistemas acessam pelo telefone.

Padrão 1: rolagem horizontal contida

A tabela rola para os lados dentro de um contêiner, sem quebrar o resto da página. Com a primeira coluna fixa, a pessoa não perde a referência. É a solução mais simples e funciona bem para dados de comparação.

Padrão 2: cards no celular

Cada linha vira um card, com rótulo e valor empilhados. Ideal para listas de pedidos, clientes e tarefas.

Padrão 3: menos colunas, mais detalhes

No celular, mostre só as colunas essenciais (cliente, valor, status) e abra os detalhes ao tocar.

Padrão 4: colunas configuráveis

Em sistemas de uso intenso, o usuário escolhe quais colunas ver.

Detalhes que fazem diferença

1. 1.Números alinhados à direita e com formatação consistente.
2. 2.Status com cor e texto, nunca só cor (Contraste de cores e WCAG: como checar em cinco minutos).
3. 3.Ordenação e filtros acessíveis no celular.
4. 4.Paginação ou carregamento progressivo para listas grandes (Paginação por cursor vs. offset: quando a lista começa a ficar lenta).
5. 5.Skeletons enquanto carrega (Feedback assíncrono: por que trocar spinners genéricos por skeleton screens).

O raciocínio é o mesmo de todo layout mobile-first (Mobile-first real: estratégias de grid, tipografia e micro-interações fluidas para telas pequenas).

A We Codex constrói sistemas que funcionam no celular. Veja sistemas web ou fale com a gente.