Saltar al contenido

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

Presta atención porque en este artículo vas a hallar la contestación que buscas.Este tutorial fue analizado por nuestros expertos para asegurar la calidad y exactitud de nuestro contenido.

Solución:

Parece hidden-xs/hidden-sm ha funcionado antes ya que la respuesta aceptada tiene muchos votos a favor, sin embargo, el ejemplo del violín no me funciona cuando estoy cambiando el tamaño del área. Sin embargo, lo que funciona para mí es la lógica opuesta usando visible-md/visible-lg. No puedo entender por qué porque, según la documentación, Bootstrap aún debería ser compatible con 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

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/

Recientemente me encontré con un problema similar, trabajando para mostrar una tabla de manera diferente, según el 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 suma de los datos en las ‘tres’ columnas. Al igual que la respuesta anterior, yo Usé una consulta de medios, pero eliminé por completo las vistas prefabricadas de Bootstrap. th y td etiquetas involucradas.

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;
  

valoraciones y comentarios

Finalizando este artículo puedes encontrar las acotaciones de otros usuarios, tú igualmente tienes la libertad de insertar el tuyo si te apetece.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *