Hide table columns when resizing html page

Navigation
2

I have an html table:

When I resize the page to a smaller resolution I would like it to be only 2 columns, and when it comes back to higher resolution, I would like all 5 columns. Use bootstrap. It could be in javascript too.

    
asked by anonymous 18.07.2017 / 13:42

2 answers

1

Would you like to do even with bootstrap or JavaScript ? Only with CSS pure can you do it. Here's an example: 

@media screen and (max-width: 442px) {
  table th:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 442px) {
  table th:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 442px) {
  table th:nth-child(5) {
    display: none;
  }
}
@media screen and (min-width: 442px) {
  table td:nth-child(3) {
     display: inline;
  }
}
@media screen and (min-width: 442px) {
  table td:nth-child(4) {
    display: inline;
  }
}
@media screen and (min-width: 442px) {
  table td:nth-child(5) {
     display: inline;
  }
}
<table>
  <td>
    Coluna 1
  </td>
  <td>
    Coluna 2
  </td>
  <td>
    Coluna 3
  </td>
  <td>
    Coluna 4
  </td>
  <td>
    Coluna 5
  </td>
</table>

In this example, when the screen resolution is less than or equal to 442px, the last 3 columns will be hidden, and when the resolution is wider than 442px the last 3 columns will be displayed.

Also follow the example using JavaScript: 

$( window ).resize(function() {
  var largura = $(window).width();
  if (largura < 442){
      $('table td:nth-child(3)').css("display", "none");
      $('table td:nth-child(4)').css("display", "none");
      $('table td:nth-child(5)').css("display", "none");
  }
  else{
      $('table td:nth-child(3)').css("display", "inline");
      $('table td:nth-child(4)').css("display", "inline");
      $('table td:nth-child(5)').css("display", "inline");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table>
  <td>
    Coluna 1
  </td>
  <td>
    Coluna 2
  </td>
  <td>
    Coluna 3
  </td>
  <td>
    Coluna 4
  </td>
  <td>
    Coluna 5
  </td>
</table>
    
18.07.2017 / 14:09
4

There are bootstrap classes for this behavior. In your case, I suggest combining the .visible-md-block and .visible-lg-block classes, add them to the elements you want to hide in a minor resolution.

Here is the list of classes and their behaviors: Bootstrap - Responsive Utilities .

  

The classes .visible-xs , .visible-sm , .visible-md , and .visible-lg are deprecated from version 3.2.0 .

Or you can use media queries for this, I advise you to create a new class and work on it, avoiding conflicts with the bootstrap: 

@media screen and (max-width:768px){
  .classe-nova{
     display:none;
   }
}
    
18.07.2017 / 13:59
Scope of PHP variable include with parameter?