Twitter Bootstrap Responsive - Show Table Column only on Desktop

twitter-bootstrap datatables hide multiple-columns
Santiago picture Santiago · May 14, 2013 · Viewed 40.3k times · Source

I'm using DataTables.net + Twitter Bootstrap and the responsive layout, what I'm trying is to hide some columns of the table using the class "visible-desktop" thats shows the columns only in big sizes but It seems not to work, hides well but if I resize the windows to get a desktop width the columns hidden start showing stacked, seems a CSS display class problem, because inherits the type of display from the parent:

.visible-desktop {
    display: inherit!important;
}

If I manipulate it to 

.visible-desktop {
    display: table-cell!important;
}

works well... Is there a workaround for this? Or I have to write my own class for table column hiding?

Answer

DeBraid picture DeBraid · Jun 24, 2015

Version 4

EDIT: Bootstrap 4 removed hidden and visible classes, see this answer for updated examples, and/or related official migration guide.

** Old Answer for Bootstrap 3 below **

Version 3

Available classes for .visible and .hidden.

Use a single or combination of the available classes for toggling content across viewport breakpoints.

bootstrap css html visible and hidden class grid

From Bootstrap section here http://getbootstrap.com/css/#responsive-utilities-classes

Related questions

DataTables: Uncaught TypeError: Cannot read property 'defaults' of undefined

When using the Bootstrap integration for DataTables, I see the following error in the console: Uncaught TypeError: Cannot read property 'defaults' of undefined (dataTables.bootstrap.js:20) This causes the pagination controls to not have styles on them. I can see …

Read More
Responsive Bootstrap Datatable not collapsing columns at the correct point

I'm using Datatables.net latest, with datatables and bootstrap. I suppose my question is: What does Datatables Responsive Bootstrap use to detect overflow, because it clearly isn't the parent width. Here is my result: It's a pretty straight forward problem. …

Read More
DataTable breaks Nested Repeater and Bootstrap

I've run into a issue with DataTables and Nested Repeaters. It basically says that I haven't gotten the correct matching tr td tags. Yet, I've followed the Nested Repeater tutorial from the link below and to me that the HTML …

Read More