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>

It looks like in the post you included, `hidden-phone hidden-tablet` was used instead of `visible-desktop`. Have you tried that? — jlars62, Aug 21 '13 at 16:33
I've tried both of those also, but still didn't affect my tables. Perhaps I'm doing them wrong? `` & ``. — daveomcd, Aug 21 '13 at 16:58
Bootstrap 3? hidden-xs/hidden-sm should work. Can you post the code you've tried? — Carol Skelly, Aug 21 '13 at 16:59
@Skelly, I think from this page that they aren't allowing in 3 for this... https://github.com/twbs/bootstrap/pull/3140 — daveomcd, Aug 21 '13 at 17:01
@Skelly, here is a jsfiddle example: http://jsfiddle.net/MgcDU/ — daveomcd, Aug 21 '13 at 17:04
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. http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/ — jlars62, Aug 21 '13 at 17:07
@daveomcd Your code seems to work fine. Try this jsFiddle http://jsfiddle.net/A4fQP/ and resize the result area. — Ross Allen, Aug 21 '13 at 18:28
@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! — daveomcd, Aug 21 '13 at 18:37

Ogglas · Answer 1 · 2016-08-10T13:22:56.927

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>

It's confusing why this works but it does after trying to work it out for a while — OLM256, May 29 '19 at 13:28

score 16 · Accepted Answer · answered Aug 21 '13 at 18:52

16

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/

answered Aug 21 '13 at 18:52

Ross Allen

43,772
14
97
95

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 -related elements." This implies that there is no official way to toggle visibility for table columns. Do you know if this is true?
– Mark E. Haase Jan 31 '16 at 18:17
1

@MarkE.Haase I think this solution might answer your question - https://stackoverflow.com/a/48295538/3761310 – DukeSilver Jun 28 '20 at 06:00
@DukeSilver the question refers to Bootstrap 3 and your link refers to bootstrap 4 – ovicko Jul 15 '21 at 15:24

score 2 · Answer 3 · answered Feb 24 '14 at 18:32

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

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

3 Answers3

Linked