Menu
I'm trying to hide columns for my responsive design when in col-xs and col-sm. I first attempted to use hidden-xs/hidden-sm classes, but this didn't work. I also tried using visible-desktop as mentioned here: Twitter Bootstrap Responsive - Show Table Column only on Desktop
That also didn't work. What is the best way to do this? I rather not make two separate tables and then hide one or the other.
Code I tried that's not currently working:
<table> <thead> <th>Show All the time</th> <th class="hidden-xs hidden-sm">Hide in XS and SM</th> </thead> <tbody> <tr> <td>Show All the time</td> <td class="hidden-xs hidden-sm">Hide in XS and SM</td> </tr> </tbody> </table> 
217
To hide individual columns, open the table for which you are hiding a column, right-click the column, and click Hide from Client Tools. You can hide multiple columns at a time by holding down the Ctrl key or the Shift key.
Usually, to hide an element from view, you use the 'display' property and set it to 'none'. But CSS also has a property called 'visibility', which hides elements in a different way. In particular, we use 'visibility: collapse' here, which is designed especially for hiding table columns and rows.
It seems hidden-xs/hidden-sm has worked before since the accepted answer has many up votes, however the fiddle example does not work for me when I'm resizing the area. What works for me though is opposite logic using visible-md/visible-lg. I can't understand why because according to documentation Bootstrap should still support hidden-xs/hidden-sm.
Working fiddle: http://jsfiddle.net/h1ep8b4f/
<table> <thead> <th>Show All the time</th> <th class="visible-md visible-lg">Hide in XS and SM</th> </thead> <tbody> <tr> <td>Show All the time</td> <td class="visible-md visible-lg">Hide in XS and SM</td> </tr> </tbody> </table> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
