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

Answer 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/

Answer 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>

Answer 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;
  }
}