Using Bootstrap 3 how can I hide columns in my table?

Question

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>

Solution 1

The code should work just fine. Bootstrap supports hiding/showing th and td with its responsive utility classes https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504:

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
  display: block !important;
  tr& { display: table-row !important; }
  th&,
  td& { display: table-cell !important; }
}

.responsive-invisibility() {
  display: none !important;
  tr& { display: none !important; }
  th&,
  td& { display: none !important; }
}

The code works in this jsFiddle: http://jsfiddle.net/A4fQP/

Solution 2

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>

Solution 3

I recently run into a similar issue, working on displaying a table differently, depending on screen size. The task for me was to hide one column when on a bigger screen and show it on a mobile device while hiding three other columns (the 'one' column is the sum of data in the 'three' columns. Like the response above, I used a media query, but disposed of bootstrap's pre-made views altogether. I added classes to the th and td tags involved.

Looks very much like this:

.full_view {
width: 50px;
  @media(max-width: 768px){
    display: none;
  }
}

.small_view {
  width: 50px;
  @media(min-width: 768px){
    display: none;
  }
}

Comments

[jlars62]

It looks like in the post you included, hidden-phone hidden-tablet was used instead of visible-desktop. Have you tried that?

[daveomcd]

I've tried both of those also, but still didn't affect my tables. Perhaps I'm doing them wrong? <th class='hidden-phone'> & <td class='hidden-tablet'>.

[Zim]

Bootstrap 3? hidden-xs/hidden-sm should work. Can you post the code you've tried?

[daveomcd]

@Skelly, I think from this page that they aren't allowing in 3 for this... github.com/twbs/bootstrap/pull/3140

[daveomcd]

@Skelly, here is a jsfiddle example: jsfiddle.net/MgcDU

[jlars62]

Have you tried looking at footables? I know its a little off topic but I've used it and it works great and is super easy and does exactly what you are looking for (and more). And as far as I have been able to tell it doesnt conflict with bootstrap at all. I use bootstrap also. css-tricks.com/…

[Ross Allen]

@daveomcd Your code seems to work fine. Try this jsFiddle jsfiddle.net/A4fQP and resize the result area.

[daveomcd]

@ssorallen, I had a syntax issue ;/ -- Thanks for providing the example so I could see it! If you submit an answer I'll accept it thanks!

[Wowbagger and his liquid lunch]

It seems that Bootstrap 3.2.0 deprecated this approach: "The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements." This implies that there is no official way to toggle visibility for table columns. Do you know if this is true?

[OLM256]

It's confusing why this works but it does after trying to work it out for a while

[DukeSilver]

@MarkE.Haase I think this solution might answer your question - stackoverflow.com/a/48295538/3761310

[ovicko]

@DukeSilver the question refers to Bootstrap 3 and your link refers to bootstrap 4