1

Tenho uma tabela e preciso ocultar uma coluna inteira quando for aberto em uma resolução específica.

Tentei utilizar o display: none porém as bordas da tabela ficam aparecendo no fim da linha, mesmo se toda coluna for ocultada.

Tentei utilizar também o visibility: hidden e/ou visibility: collapse, porém só oculta o conteúdo, não oculta a coluna inteira.

Como posso fazer isso?

1
  • 4
    Coloca o seu código. Commented 17/01/2017 às 13:25

2 Respostas 2

2

Pelo que entendi na sua citação, seria algo referente a isso?

table tr td {
  border: 1px solid #000
}
.some {
  display: none
}
<table width="100%">
  <tr>
    <td>Coluna A</td>
    <td>Coluna B</td>
    <td class="some">Coluna C</td>
    <td>Coluna D</td>
  </tr>
</table>

2
  • Boa, to apredendo ainda a mexer aqui no stack, vlww!! Commented 17/01/2017 às 13:46
  • Sim Luiz Augusto, é isso que estou precisando, porém aplicando a técnica de resolução conforme o Diego Souza respondeu, fazendo assim, faz com que a coluna desejada, seja ocultada quando ficar em uma resolução específica. :D Commented 17/01/2017 às 14:50
1

Escondendo apenas a terceira coluna a partir de 568px.

Usando o :nth-child(X) você pode colocar o número da coluna que deseja ocultar.

table tr td {
  border: 1px solid #000;
}
@media screen and (min-width: 568px) {
  table tr td:nth-child(3) {
    display: none;
  }
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

0

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 .