web-dev-qa-db-fra.com

Bootstrap 3 table - table-responsive ne fonctionne pas

J'utilise bootstrap 3 pour un projet de site Web. J'essaie de créer une page avec une table sensible, de sorte que j'aurais la barre de défilement lorsque la table est trop grande. J'ai fait un cas de test comme suit:

<div class="row">
  <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end col-12 -->
</div><!-- end row -->

Le problème est qu’il n’ajoute pas la barre de défilement, il élargit simplement le site Web à la largeur du tableau.

Voir une capture d'écran ici: 

http://img42.com/C3fX5

Je l'ai vu fonctionner sur plusieurs autres sites Web, alors quelque chose que je fais ... est faux.

htmltwitter-bootstraptwitter-bootstrap-3responsive-designhtml-table
15
Daniel Olsen

Remplacez votre table sensible avec cette

<div class='table-responsive'> -> <div style="overflow-x:auto;">
41
Savan Kachhiya Patel

Assurez-vous de régler votre affichage de la table block 

.table {
   display: block !important;
}
14
Hamza AVvan

la fonction table-responsive de bootstrap fonctionne très bien dans les environnements sandbox, mais elle pose problème dans les environnements réels. La raison de ce bogue est que bootstrap donne des styles de type width: 100% et overflow-y: hidden, adaptés aux tables. Ces deux styles ne jouent pas bien ensemble. Le masquage par débordement fonctionne mieux lorsqu'il existe une largeur fixe ou maximale. J'ai donné à la table une largeur maximale: 270px; pour les appareils mobiles, et que corrigé le bogue.

5
Nate Levine

Votre code va bien. Je viens de mettre en place un violon ici .

Fonctionne là!

J'ai littéralement copié et collé votre code. Êtes-vous sûr que vos liens vers les fichiers Javascript et CSS de Bootstrap fonctionnent?

<div class="row">
 <h4>Nuværende kurser</h4>
  <div class="col-12 col-sm-12 col-lg-12">
   <div class="table-responsive">
    <table class="table">
     <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div><!-- end col-12 -->
  </div><!-- end row -->
3
ben.kaminski

J'ai eu ce problème et a constaté que cela fonctionnait soit de donner à la table une largeur définie en px, soit de définir la table pour afficher: bloc.

2
Andrew Dant

Je l'ai fait.

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">


            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">


                       //wrapper that will give opportunity to use: overflow-x: auto; 
                       <table style="table-layout: fixed; width: 100%;">
                           <tr>
                               <td>


                                  //SCROLL
                                  <div style="width: 100%; overflow-x: auto;">

                                      //table, that shoud have "table-responsive" bootstrap class effect
                                      <table class="table table-hover">

                                          //...table content...

                                      </table>

                                  </div>


                               <td>
                           </tr>

                       </table>                           


                    </div>
                </div>

        </div>
    </div>
</div>

Vous recevrez à l'écran xs (exemple de mon application):

 enter image description here

1
Evgeniy Miroshnichenko

Vous pouvez utiliser FooTable. C’est un plugin jQuery qui vous permet de redimensionner et de redistribuer les données dans vos tables afin d’adapter au mieux votre point de rupture actuel.

0
fatihdemir

Pour moi, c’était la valeur 'min-width' dans l’élément body qui cassait la réactivité de cette classe.

0
tahaerden