Idéias de design para exibir grandes quantidades de dados em uma tabela HTML

Question

Eu tenho uma tabela HTML que literalmente tem 30 colunas de dados e estou tendo dificuldade em enquadrá -lo de tal maneira que pode ser visível sem rolagem maciça esquerda/direita.

Uma coisa que eu queria saber é se alguém já viu algo inteligente com cabeçalhos de colunas? Alguns deles simplesmente não podem ser abreviados o suficiente, mas o cabeçalho da coluna é algo como "entrevista" e o valor é numérico (muito espaço desperdiçado para o cabeçalho sozinho). É verdade que eu poderia tentar nomear essas colunas como o INT ou o que quer que seja, mas há muitas colunas de maneira semelhante que elas podem se tornar confusas.

Talvez algum tipo de colunas de colapso automático com base no movimento do mouse? Não tenho certeza .. Eu só preciso de algumas sugestões criativas sobre como exibir esses dados!

Answer 1

Provavelmente, o usuário terá um demônio de um tempo compreendendo 30 colunas de dados, independentemente da rolagem.

Eu recomendaria mostrar as colunas mais fundamentais (coisas como nome, descrição, identificação de números - coisas principais, espero que existam apenas 10 ou menos) e, em seguida, deixando o usuário ativar ou desligar as colunas de que precisar. Um pouco como Google quadrado.

Use jQuery e CSS para fazer isso de maneira limpa. Também pode haver bibliotecas de interface do usuário do JavaScript que fazem isso por você (JQuery Ui, Yui, outros ...)

Answer 2

Crie imagens para os nomes das colunas e gire o texto na imagem 90 graus. Você pode ter um nome longo com larguras igualmente pequenas.

Josh

Answer 3

Eu concordo com a resposta de colunas ferozes e alternadas é uma boa ideia. Além disso, dependendo dos dados, eu recomendaria apenas algumas colunas exibidas e, quando o usuário clica na linha em que está interessado, ele se move para uma nova página dedicada aos dados nesse registro. Isso funcionará para alguns tipos de dados e não para outros