Hiding entire column with CSS at a specific resolution

Asked

Viewed 765 times

1

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

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

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

How can I do that?

css
  • 4

    Put your code down.

2 answers

2

From what I understand in your quote, it would be something related to this? 

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>

  • Good, I’m still learning how to work the stack here, vlww!!

  • Yes Luiz Augusto, this is what I need, but applying the technique of resolution as Diego Souza answered, doing so, makes the desired column, is hidden when it is in a specific resolution. : D

1


Hiding only the third column from 568px.

Using the :nth-child(X) you can put 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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.