web-dev-qa-db-fra.com

En utilisant Bootstrap 3 comment puis-je masquer des colonnes dans ma table?

J'essaie de masquer les colonnes de ma conception réactive lorsque dans col-xs et col-sm. J'ai d'abord essayé d'utiliser hidden-xs/hidden-sm classes, mais cela n'a pas fonctionné. J'ai également essayé d'utiliser visible-desktop comme mentionné ici: Twitter Bootstrap Responsive - Afficher la colonne du tableau uniquement sur le burea

Cela n'a pas fonctionné non plus. Quelle est la meilleure façon de procéder? Je préfère ne pas faire deux tableaux séparés, puis cacher l'un ou l'autre.

Code que j'ai essayé et qui ne fonctionne pas actuellement: 

<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>
htmlcsstwitter-bootstrapresponsive-designhtml-table
28
daveomcd

Le code devrait très bien fonctionner. Bootstrap prend en charge le masquage/affichage de th et td avec ses classes utilitaires réactives 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; }
}

Le code fonctionne dans ce jsFiddle: http://jsfiddle.net/A4fQP/

16
Ross Allen

Il semble hidden-xs/hidden-sm a fonctionné auparavant car la réponse acceptée a de nombreux votes positifs, mais l'exemple du violon ne fonctionne pas pour moi lorsque je redimensionne la zone. Ce qui fonctionne pour moi, c'est la logique opposée utilisant visible-md/visible-lg. Je ne comprends pas pourquoi, car selon la documentation Bootstrap devrait toujours prendre en charge hidden-xs/hidden-sm .

Violon de travail: 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>
16
Ogglas

J'ai récemment rencontré un problème similaire, travaillant à afficher un tableau différemment, selon la taille de l'écran. La tâche pour moi était de masquer une colonne sur un écran plus grand et de l'afficher sur un appareil mobile tout en masquant trois autres colonnes (la colonne "un" est la somme des données dans les colonnes "trois". Comme la réponse ci-dessus, je utilisé une requête multimédia, mais supprimé complètement les vues prédéfinies de bootstrap. J'ai ajouté des classes aux balises th et td impliquées.

Ressemble beaucoup à ceci:

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

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