Tabelas em Web Design Responsivo


Tabelas em Design Responsivo

Apesar das tabelas não serem utilizadas em larga escala em interfaces de sites, ainda sim existem casos em que é necessário utilizar tabelas para compor o grid, como por exemplo carrinhos de compra de e-commerce, dados em listas tabuladas, grids de formulários de sistema, entre outros.

Quando pensamos no design responsivo elas por sua vez causam um pouco de dor de cabeça na hora de fazer as adaptações.

Por mais que seja utilizado porcentagem como medida ao invés de pixels,  em algumas resoluções e dependendo da quantidade de colunas as informações fica apertadas e ilegíveis para o usuário.
Para resolver este problema em um dos meus projetos utilizei algumas referências que busquei em sites que falavam sobre o assunto e a melhor solução foi optar por scroll horizontal dentro da tabela fazendo com que os dados sejam facilmente lidos pelos usuários.

Como fazer isso?! simples!, uma pequena linha de código no seu CSS e solucionará o problema.

Nas Media Queries onde você ira colocar o seu código para as resoluções menores insira a seguinte linha.

table{display:block; width:auto; overflow-x: auto; white-space: nowrap;}

 

O atributo white-space:nowrap que realiza a tarefa de deixar os elementos horizontalmente, não permitindo a adaptação da tabela através da porcentagem, faz com que a rolagem seja necessária, caso você tenha problema com texto que acabam invadindo as colunas a frente, crie um class para essa coluna deixando o seu css com white-space:normal; assim o problema será resolvido.

Simples não?!

Agora as tabelas não serão mais um problema na hora de fazer o layout responsivo do seu projeto.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

3 comentários em “Tabelas em Web Design Responsivo

  1. bRUNO 16 de novembro de 2016 14:09

    Simplesmente, show! Essa linha de código mudou meu dia!

  2. Flávio 23 de março de 2016 22:55

    Valeu. Essa linha de código me quebrou um galho imenso hoje. Muito obrigado!

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>