Usando Bootstrap 3 ¿cómo puedo ocultar columnas en mi tabla?

Intento ocultar columnas para mi diseño receptivo cuando estoy en col-xs y col-sm . Primero intenté usar hidden-xs/hidden-sm clases hidden-xs/hidden-sm , pero esto no funcionó. También intenté usar visible-desktop como se menciona aquí: Twitter Bootstrap Responsive – Mostrar columna de tabla solo en el escritorio

Eso tampoco funcionó. ¿Cuál es la mejor manera de hacer esto? Prefiero no hacer dos tablas separadas y luego ocultar una u otra.

Código que probé que no funciona actualmente:

 
Show All the time
Show All the time

El código debería funcionar bien. Bootstrap admite ocultar / mostrar th y td con sus clases de utilidad receptivas 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; } } 

El código funciona en este jsFiddle: http://jsfiddle.net/A4fQP/

Parece que hidden-xs/hidden-sm ha funcionado antes, ya que la respuesta aceptada tiene muchos votos, sin embargo, el ejemplo de violín no funciona para mí cuando estoy redimensionando el área. Lo que a mí me funciona es la lógica opuesta usando visible-md/visible-lg . No puedo entender por qué, porque de acuerdo con la documentación, Bootstrap aún debería admitir hidden-xs / hidden-sm .

Violín de trabajo: http://jsfiddle.net/h1ep8b4f/

 
Show All the time Hide in XS and SM
Show All the time Hide in XS and SM

Recientemente me encontré con un problema similar, trabajando en mostrar una tabla de manera diferente, dependiendo del tamaño de la pantalla. La tarea para mí era ocultar una columna cuando estaba en una pantalla más grande y mostrarla en un dispositivo móvil mientras ocultaba otras tres columnas (la columna ‘uno’ es la sum de datos en las columnas ‘tres’. Al igual que la respuesta anterior, usé una consulta de medios, pero eliminé todas las vistas predeterminadas de bootstrap. Agregué clases a las tags th y td implicadas.

Se parece mucho a esto:

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