Solucionado
Pessoal,
Tenho uma dúvida em como lidar com tabelas para sites responsivos.
Qual a melhor forma de exibir todo o conteúdo (colunas) de uma tabela?
Pensei em colocar rolagem horizontal, mais não é bacana. Poderia ocultar algumas colunas de informações menos relevantes, mais se quiser mostrar todas as colunas.
Qual a melhor solução? Não acho que nenhuma opção acima seja boa.
Existem diversas "soluções" hoje para o uso de tabelas em sites responsivos, mas é quase um consenso da comunidade de desenvolvedores Web que não existe um único jeito de se abordar este problema.
Vou lhe apresentar os mais utilizados e conhecidos:
1) Travar a primeira coluna a esquerda, e permitir o scrol horizontal das outras.
Ex: http://zurb.com/playground/projects/responsive-tables/index.html
O bom deste método é que permite você comparar diversas colunas , sem perder a referência do que está se comparando em cada linha.
A desvantagem é que ainda precisamos do scroll horizontal.
2) Empilhar as linhas, mostrando uma "mini-tabela" referente a cada linha.
Ex: http://codepen.io/chriscoyier/full/xtoJD
A parte boa deste método é que fica fácil de ver os dados de uma linha apenas e encontramos um meio de nos livrar do scroll horizontal.
A parte ruim é que perde um pouco o sentido do conteúdo tabular, pois não fica tão fácil ficar subindo e descendo para comparar dados entre duas colunas diferentes. Outro ponto é que caso a tabela tenha muitas linhas, vai gerar diversas outras mini tabelas quando estivermos vendo pelo mobile , e vamos acabar tendo que scrollar bastante para chegar ao fim da tabela.
3) Colocar a opção para o usuário escolher as colunas que quer visualizar no momento.
Ex: http://demos.jquerymobile.com/1.3.0-rc.1/docs/tables/table-column-toggle.html
A vantagem é que fica a cargo do usuário escolher as colunas que deseja ver no momento.
A desvantagem é que ele toda hora precisa ficar alternando entre colunas, tendo que clicar diversas vezes no menu de alternar colunas.
Como você pode ver temos diversas opções , então nossa escolha na abordagem desse problema depende muito do tipo de tabela que queremos tornar responsiva. Fica a cargo do desenvolvedor pensar sobre isto e tentar escolher a melhor solução para o seu usuário.
BÔNUS:
Minha solução favorita para lidar com tabelas responsivas, é utilizar o conjunto de plugins TableSaw. Ele combina as 3 soluções que apresentei acima, em um jeito bonito e simples de implementar no seu sistema, podendo até deixar o usuário escolher qual das soluções ele prefere usar, dá uma conferida:
Demonstração do Table Saw: http://filamentgroup.github.io/tablesaw/demo/kitchensink.html
Git Hub do projeto:
https://github.com/filamentgroup/tablesaw
Espero que tenha te ajudado a esclarecer sua dúvida, grande abraço!
Excelente resposta Douglas! Inclusive, obrigado por disponibilizar a sua solução no GitHub, ajudará bastante a galera!