O display de dados tabulares levanta questões difíceis num ambiente responsivo. Se a tabela é maior do que a tela, podemos permitir um scrolling horizontal, ocultar umas colunas, mostrar um resumo da tabela com um link para a versão completa, ou fazer outras escolhas.
Esta primeira abordagem do Chris Coyier funciona com só CSS. Abaixo de uma determinada largura fixa da tabela, cada linha é transformada em coluna, os cabeçalhos da tabela original sendo repetidos no lado. Tudo se passa como se a tabela passava por uma rotação de 90 graus exibindo uma linha de cada vez. Todos os seus dados ainda aparecem, Embora esta abordagem funcione melhor com um pequeno número de linhas e colunas.
Um plugin jQuery, Stackable.js, foi desenvolvido pelo John Polacek seguindo os mesmos princípios.
David Bushell vai um passo além fazendo virar as mesas com espírito trocando as linhas e as colunas, colocando a linha de cabeçalhos na primeira coluna da tabela resultante, e sempre mantendo-a visível, ao mesmo tempo que adiciona uma barra de rolagem horizontal para o resto da tabela.
Em uma abordagem muito semelhante, Zurb torna fixa a primeira coluna, permitindo a rolagem horizontal das colunas restantes. Não há intercâmbio entre linhas e colunas nesta implementação CSS/javascript, e assim os dados são apresentados na mesma maneira em todos os tamanhos de tela.
Esta demo mostra uma previsualização da tabela e uma chamada à ação pressione para ver quando não houver espaço suficiente para exibir a tabela inteira. O usuário assim sabe que uns dados tabulares estão presentes, ele é livre para ir vê-los em outra página ou não.
Dando um estatuto persist, essential ou optional às colunas através de uma classe CSS, e adicionando um botão de menu javascript para selecionar manualmente qual coluna mostrar ou ocultar, este exemplo de Filament Group É um bom compromisso entre a facilidade de utilização e a quantidade de dados a serem exibidos.
Com a seu plugin jQuery FooTable, Chris Coyier conclui esta série com uma tabela que pode ocultar colunas em pontos de ruptur específicos (media queries CSS), permitir a ordenação de colunas e estender a linha para mostrar o conteúdo oculto.
Girar as tabelas
Esta primeira abordagem do Chris Coyier funciona com só CSS. Abaixo de uma determinada largura fixa da tabela, cada linha é transformada em coluna, os cabeçalhos da tabela original sendo repetidos no lado. Tudo se passa como se a tabela passava por uma rotação de 90 graus exibindo uma linha de cada vez. Todos os seus dados ainda aparecem, Embora esta abordagem funcione melhor com um pequeno número de linhas e colunas.
Um plugin jQuery, Stackable.js, foi desenvolvido pelo John Polacek seguindo os mesmos princípios.
Mesas giratórias
David Bushell vai um passo além fazendo virar as mesas com espírito trocando as linhas e as colunas, colocando a linha de cabeçalhos na primeira coluna da tabela resultante, e sempre mantendo-a visível, ao mesmo tempo que adiciona uma barra de rolagem horizontal para o resto da tabela.
A coluna colada
Em uma abordagem muito semelhante, Zurb torna fixa a primeira coluna, permitindo a rolagem horizontal das colunas restantes. Não há intercâmbio entre linhas e colunas nesta implementação CSS/javascript, e assim os dados são apresentados na mesma maneira em todos os tamanhos de tela.
Pressione para ver
Esta demo mostra uma previsualização da tabela e uma chamada à ação pressione para ver quando não houver espaço suficiente para exibir a tabela inteira. O usuário assim sabe que uns dados tabulares estão presentes, ele é livre para ir vê-los em outra página ou não.
Colunas que jogam de esconde-esconde
Dando um estatuto persist, essential ou optional às colunas através de uma classe CSS, e adicionando um botão de menu javascript para selecionar manualmente qual coluna mostrar ou ocultar, este exemplo de Filament Group É um bom compromisso entre a facilidade de utilização e a quantidade de dados a serem exibidos.
Cucu a tabela!
Com a seu plugin jQuery FooTable, Chris Coyier conclui esta série com uma tabela que pode ocultar colunas em pontos de ruptur específicos (media queries CSS), permitir a ordenação de colunas e estender a linha para mostrar o conteúdo oculto.
Ilustração: La table tournante : expérience de magnétisme, por Eugène de Mirecourt e Champfleury, 1853
Des tables responsives (em francês)
Responsive tables (em inglês)
Tablas responsivas (em espanhol)
Sem comentários:
Enviar um comentário