Skip to main content
adicionou 56 caracteres ao conteúdo
Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

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>

Escondendo apenas a terceira coluna a partir de 568px.

Usando o :nth-child(X).

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>

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>

Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

Escondendo apenas a terceira coluna a partir de 568px.

Usando o :nth-child(X).

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>