Hide table td in some cell resolutions

Question

Hide table td in some cell resolutions

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I have an HTML page on bootstrap and it is already responsive. But I need that when they access the site in a certain resolution defined by me hide only one of a table this is possible?

html table bootstrap responsivo

asked by anonymous 02.10.2017 / 15:02

2 answers

How to create a JavaFX Window without the three standard buttons (Minimize, Maximize and Close)? How to delete the contents of a file in c?

score 3 · Answer 1

You have the responsibility utilities that allow you to do this without needing external CSS to the Framework:

To display:

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*

* (asterisk) - Can be: 'block' , 'inline' and 'inline-block' .

To hide:

.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

Just add to the element you want this style to fire.

NOTE:

XS = Extra small (Menor que 768px)
SM = Small (Maior ou igual a 768px)
MD = Medium (Maior ou igual a 992px)
LG = Large (Maior ou igual a 1200px)

Application usage example:

<table>
    <tr>
        <td class="" >Exibe Todos</td>
        <td class="hidden-xs">Exibe SM ou maior</td>
        <td class="hidden-xs hidden-sm">Exibe MD ou maior</td>   
        <td class="hidden-xs hidden-sm hidden-md">Exibe LG</td>    
    </tr>
</table>

score 0 · Answer 2

You can do this with CSS only.

Set a maximum resolution of width and within the items you want to skip.

For example, by hiding a column with maximum screen width of 450px.

@media only screen and (max-width: 450px) {
 td.classecolunaesconder{display:none; }
}