21

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.

1
  • já que está utilizando Ruby, já pensou em utilizar o Zurb Foundation ao invés do Bootstrap? Afinal o Zurb utiliza SASS e não LESS. Commented 22/02/2015 às 1:31

4 Respostas 4

14

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>
11

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.

7

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

11
  • 1
    seria interessante colocar exemplos de código, não só citar uma fonte externa :) Commented 11/12/2013 às 16:24
  • Não coloquei pois achei bem simples, de qualquer forma... xD Commented 11/12/2013 às 16:27
  • Obrigado pela dica. Deixe ver se percebi, devo incluir a classe respectiva dentro dos <th> e <td> que quiser ocultar? Por exemplo, <th class ="hidden-phone"></th><td class="hidden-phone"></td> - certo? Commented 11/12/2013 às 16:31
  • Não, com o bootstrap você não utiliza mais as tags table, td, th... Existem classes do css criadas pelo bootstrap que servem para determinar que aquela "div" é uma tabela, outra pra "div" cabeçalho e assim por diante, a estrutura vai ser como se você estivesse montando uma tabela realmente, porem somente com divs, já essas classes, "hidden-phone" por exemplo, servem sim para determinar em quais mídias você quer que aquele conteúdo seja visualizado...eu não sei qual versão do bootstrap você está utilizando, mais lá no site deles tem tudo explicado em PT! getbootstrap.com Commented 11/12/2013 às 16:37
  • ja experimentei, e deu certo. Muito obrigado. Aceitei a pergunta de Toni porque é a que mais rapidamente ensina como lidar com o problema. Se o meu criterio esta errado, por favor corrija-me. Commented 11/12/2013 às 16:40
4

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...

1
  • Vinicius Diascanio muito bom, esses exemplos são realmente úteis! Commented 30/08/2015 às 19:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .