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?
-
1Você quer somente saber como faz ou aplicar em seu código? Caso seja a segunda opção, edite a pergunta com o mesmo.– Felipe DuarteCommented 2/10/2017 às 13:06
-
Aplicar no código– Felipe DutraCommented 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– Caique RomeroCommented 2/10/2017 às 13:20
Adicione um comentário
|
2 Respostas
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>
-
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
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; }
}