web-dev-qa-db-fra.com

Bootstrap Responsive Table Ne pas agir réactif

Pouvez-vous s'il vous plaît jeter un oeil à ce lien (s'il vous plaît faites défiler vers le bas de la page) et laissez-moi savoir pourquoi "
1- Le tableau n'est pas réactif? 2- Je veux pouvoir contrôler les largeurs de <td> en utilisant col-md-3 et col-lg-3 est-ce que cela fonctionne aussi dans le tableau?

Voici le code que j'ai:

<div class="col-md-offset-1  col-lg-offset-1 col-md-6    col-lg-6">
<table class="table table-hover table-responsive">
<tbody>
<tr>
<td width="174"><strong>7:30 – 8:45 a.m.</strong></td>
<td>Arrival / Health CheckFree Choice in Activity Areas, books, puzzles, matching games, large block building, small blocks, floor toys, Lego, trucks and car play.</td>
</tr>
<tr>
<td><strong>8:45 – 9:00 a.m.</strong></td>
<td>Clean-up, toileting, wash up for snack</td>
</tr>
<tr>
<td><strong>9:00 – 9:30 a.m.</strong></td>
<td>Morning snack</td>
</tr>
<tr>
<td><strong>9:30 -10:00 a.m.</strong></td>
<td>Circle Time: Action songs, singing time, finger plays, hello songs, discussion of daily activities</td>
</tr>
   </tbody>
</table>
</div>

Comme vous pouvez voir que je ne pouvais pas contrôler la taille de la table avec col-md-3 et col-lg-3, je l’ai donc enveloppée dans un div mais le responsive ne fonctionne pas

twitter-bootstraptwitter-bootstrap-3bootstrapper
13
Mona Coder

Veuillez relire la documentation de cette fonctionnalité . La classe table-responsive doit être sur un div wrapper, pas la table elle-même.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
47
ceejayoz

Il est efficace de définir la classe table-responsive sur la table elle-même si vous définissez également la table sur display: block. Il est généralement préférable d’utiliser le wrapper div cependant.

0
Andrew Dant

.table-responsive devrait être sur l'emballage div, car même si vous utilisez la propriété css, overflow:scroll scrollbar ne sera pas actif sur la balise table. Nous utilisons donc un div wrapper avec la classe table-responsive pour afficher la barre de défilement afin de rendre la table sensible.

C’est la raison pour laquelle nous devons écrire du code de table sensible comme ceci

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
0
Gaurav Aggarwal