0

Tenho uma pagina em HTML em bootstrap ele já é responsivo. Mas preciso que quando acessarem o site em certa resolução definida por mim oculte apenas um de uma tabela isso é possivel?

3
  • 1
    Você quer somente saber como faz ou aplicar em seu código? Caso seja a segunda opção, edite a pergunta com o mesmo. Commented 2/10/2017 às 13:06
  • Aplicar no código Commented 2/10/2017 às 13:09
  • Você pode usar o JS para identificar a resolução da tela window.screen ex.: javascriptkit.com/howto/newtech3.shtml Commented 2/10/2017 às 13:20

2 Respostas 2

3

Você possui os utilitários de responsabilidade que permitem fazer isso sem precisar de CSS externos ao Framework:

Para exibir:

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*

*(asterisco) - Pode ser: 'block', 'inline' e 'inline-block'.

Para ocultar:

.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

Basta adicionar ao elemento que deseja que seja disparado esse estilo.

OBS:

XS = Extra small (Menor que 768px)
SM = Small (Maior ou igual a 768px)
MD = Medium (Maior ou igual a 992px)
LG = Large (Maior ou igual a 1200px)

Exemplo de aplicaçao de uso:

<table>
    <tr>
        <td class="" >Exibe Todos</td>
        <td class="hidden-xs">Exibe SM ou maior</td>
        <td class="hidden-xs hidden-sm">Exibe MD ou maior</td>   
        <td class="hidden-xs hidden-sm hidden-md">Exibe LG</td>    
    </tr>
</table>
2
  • ai como eu faço? tipo <td class="hidden-xs"> isso? quero saber como ativar na coluna que quero que oculte Commented 2/10/2017 às 13:29
  • Isso mesmo, so adicionar o classname no 'td' ou 'tr' que quer ocultar, se quer ocultar em dispositivos pequenos usa '<td class='hidden-xs'></td>', funciona pra qualquer elemento, não só com tds, pode usar com 'div', 'span' e todos os outros. Commented 2/10/2017 às 13:30
0

Você pode fazer isso apenas com CSS.

Defina uma resolução máxima de largura e dentro os itens que deseja ocutar.

Por exemplo ocultando uma coluna com largura máxima de tela de 450px.

@media only screen and (max-width: 450px) {
 td.classecolunaesconder{display:none; }
}

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 .