Estou trabalhando numa aplicação web usando Ruby On Rails 4 e grande parte da interface consiste de tabelas.
Gostaria que sugerissem uma forma de detectar o tamanho da tela em uso e, com base nisso, ocultar certas colunas de cada tabela.
Estou trabalhando numa aplicação web usando Ruby On Rails 4 e grande parte da interface consiste de tabelas.
Gostaria que sugerissem uma forma de detectar o tamanho da tela em uso e, com base nisso, ocultar certas colunas de cada tabela.
Podes ocultar qualquer objecto por classe ou id usando o seguinte código:
@media (max-width:768px) {
#id_a_ocultar_em_tablet {
display: none;
}
.classe_a_ocultar_em_tablet {
display: none;
}
}
@media (max-width:480px) {
#id_a_ocultar_em_smartphone {
display: none;
}
.classe_a_ocultar_em_smartphone {
display: none;
}
}
Com as regras acima, podes criar CSSs especiais para cada dispositivo, caso queiras apenas esconder ou mostrar objectos podes usar estas classes, e fica tudo mais simples:
.visible-phone
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
Por exemplo:
<div class="hidden-phone">Este texto nao aparece num smartphone</div>
<div class="visible-phone">Este texto SÓ aparece num smartphone</div>
Simplesmente use o componente .table-responsive
que fornece o Bootstrap:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Pode encontrar mais informação na documentação do projeto.
Não é necessário hackear o CSS ou usar outros componentes diferentes da tabela como foi sugerido.
Com o Twitter Bootstrap tudo fica mais fácil, basta você criar o HTML corretamente e incluir as classes certas em suas tags, visto que ele já tem todo o CSS criado para que você utilize o design responsivo.
Esse é um HTML básico de uma tabela responsiva:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Aqui explica direitinho: Bootstrap
Aqui tem uma opções interessantes pra tabelas responsivas: http://elvery.net/demo/responsive-tables/
E não sei também qual versão do Bootstrap você está usando, mas a 3 tem umas alterações no modo de usar a grid...