Hiding entire column with CSS at a specific resolution

Question

Hiding entire column with CSS at a specific resolution

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have a table and need to hide an entire column when it opens at a specific resolution.

I tried to use the display: none but the table edges appear at the end of the line, even if every column is hidden.

I also tried to use visibility: hidden and / or visibility: collapse , but it only hides the content, it does not hide the entire column.

How can I do this?

css

asked by anonymous 17.01.2017 / 14:23

2 answers

2

From what I understood in your quote, would that be something to do with it?

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>

17.01.2017 / 14:34

Get index of a div with equal classes using mouseover () Jquery Make calculations between Inputs

score 1 · Accepted Answer

Hiding only the third column from 568px .

Using :nth-child(X) you can enter the number of the column you want to hide.

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>