Utilisation de Bootstrap 3 Comment puis-je masquer des colonnes dans ma table?
J'essaie de masquer les colonnes pour mon responsive design quand dans col-xs et col-sm. J'ai d'abord essayé d'utiliser des classes hidden-xs/hidden-sm, mais cela n'a pas fonctionné. J'ai également essayé d'utiliser {[4] } comme mentionné ici: Twitter Bootstrap Responsive-afficher la colonne de la Table uniquement sur le Bureau
Cela n'a pas non plus fonctionné. Quelle est la meilleure façon de le faire? Je préfère ne pas faire deux tables séparées et ensuite Cacher l'une ou l'autre.
Code que j'ai essayé 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>
3 réponses
Le code devrait fonctionner très bien. Bootstrap prend en charge le masquage / affichage th et td avec ses classes d'utilitaires sensibles 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/
Il semble que hidden-xs/hidden-sm a déjà fonctionné puisque la réponse acceptée a beaucoup de votes, mais l'exemple de violon ne fonctionne pas pour moi quand je redimensionne la zone. Ce qui fonctionne pour moi, c'est la logique opposée en utilisant visible-md/visible-lg. Je ne peux pas comprendre pourquoi parce que selon la documentation Bootstrap devrait toujours supporter 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>
J'ai récemment rencontré un problème similaire, travaillant sur l'affichage d'une table différemment, en fonction de 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 " une "est la somme des données dans les colonnes "trois". Comme la réponse ci-dessus, j'ai utilisé une requête multimédia, mais j'ai complètement éliminé les vues pré-faites 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;
}
}