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.
Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!