Bootstrap 3 table - table-responsive not working

Question

Sto utilizzando bootstrap 3 per un progetto di sito Web. Sto cercando di creare una pagina con una tabella reattiva, in modo da avere la barra di scorrimento quando il tavolo è troppo grande. Ho fatto un banco di prova in questo modo:

<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 --> 

Ora, il problema è che non aggiunge la barra di scorrimento, si è limitata espande il sito web per la larghezza della tabella.

vedere uno screenshot qui:

L'ho visto lavorare su diversi altri siti web, in modo da qualcosa che sto facendo ... è sbagliato.

Answer 1

Il codice è valido. Ho appena creato un violino here.

Funziona lì!

Ho letteralmente copiato e incollato il codice. Sei sicuro che i tuoi link al file Javascript e al file CSS di Bootstrap funzionino?

<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 --> 

Answer 2

Sostituire la vostra tavola-reattivo con tavolo-reattiva opere questa

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

Answer 3

di bootstrap fini in ambienti sandbox, ma è buggy su ambienti live. Il motivo del bug è che bootstrap offre stili di larghezza della tabella responsive: 100% e overflow-y: hidden. Questi due stili non giocano bene insieme. Il nascondimento del trabocco funziona meglio quando c'è una larghezza fissa o massima. Ho dato a table-responsive una larghezza massima: 270px; per dispositivi mobili, e che ha risolto il problema.

Answer 4

È possibile utilizzare FooTable. È un plug-in di jQuery che consente di ridimensionare e ridistribuire i dati all'interno delle tabelle per ottimizzare il breakpoint corrente.

Answer 5

Prova questa
rimuovere <div class="table-responsive">...</div>
e spostare classe tavolo-reattiva nel
<div class="col-12 col-sm-12 col-lg-12">

esempio

<div class="col-12 col-sm-12 col-lg-12 table-responsive">

questo lavoro di 100%, ma se non funzionano mossa classe tavolo-responsivi agli All'inizio strato Div , In questo caso, è necessario rimuovere
<div class="col-12 col-sm-12 col-lg-12">
.

Answer 6

Assicurarsi di impostare la visualizzazione della tabella blocco

.table { 
    display: block !important; 
} 

Answer 7

Ho avuto questo problema e ha scoperto che ha funzionato a uno dare al tavolo un larghezza impostata in px, o per impostare la tabella per display: block .

Answer 8

L'ho fatto.

<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> 

Riceverai in xs-schermo (ad esempio dalla mia app):

Answer 9

per me è stato il valore 'min-width' in elemento del corpo rompere la reattività di questa classe .