Bootstrap 3 Tabelle - Tabelle reagiert nicht funktioniert

Question

Ich verwende Bootstrap 3 für ein Website-Projekt. Ich versuche eine Seite mit einer reaktionsfähigen Tabelle zu erstellen, sodass ich die Bildlaufleiste habe, wenn die Tabelle zu groß ist. Ich habe einen Testfall wie folgt:

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

Nun, das Problem ist, dass es nicht die Bildlaufleiste hinzufügt, ist es lediglich die Website auf die Breite des Tisches erweitert.

Siehe Screenshot hier:

ich es auf mehreren anderen Websites arbeiten gesehen haben, so etwas, was ich tue ... ist falsch.

Answer 1

Ihr Code ist in Ordnung. Ich habe gerade eine Geige aufgestellt here.

Funktioniert dort!

Ich habe Ihren Code buchstäblich kopiert und eingefügt. Sind Sie sicher, dass Ihre Links zur JavaScript-Datei und CSS-Datei von Bootstrap funktionieren?

<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

Replace Tisch-responsive mit dieser

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

Answer 3

Bootstrap-Table-responsive funktioniert gut in Sandbox-Umgebungen, aber es ist Buggy auf Live-Umgebungen. Der Grund für den Fehler ist, dass Bootstrap Tabellen-reaktive Stile der Breite gibt: 100% und Überlauf-y: versteckt. Diese beiden Stile spielen nicht gut zusammen. Die Überlaufverbergung funktioniert am besten, wenn eine feste oder maximale Breite vorhanden ist. Ich gab table-responsive eine maximale Breite: 270px; für mobile Geräte, und das behebt den Fehler.

Answer 4

Sie können FooTable verwenden. Es ist ein jQuery-Plugin, mit dem Sie die Daten in Ihren Tabellen so skalieren und verteilen können, dass sie Ihrem aktuellen Breakpoint am besten entsprechen.

Answer 5

Versuchen Sie, diese
<div class="table-responsive">...</div>
entfernen und Klassentabelle reagierende in
<div class="col-12 col-sm-12 col-lg-12">

Beispiel

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

diese 100% arbeiten, aber wenn Sie nicht Arbeit bewegen Klasse Tisch als Reaktion auf frühere Div Ebene verschieben , In diesem Fall muss
<div class="col-12 col-sm-12 col-lg-12">
entfernt werden.

Answer 6

Stellen Sie sicher, Ihre Tabellenanzeige Block

.table { 
    display: block !important; 
} 

Answer 7

Ich hatte dieses Problem und fand eingestellt werden, dass es entweder arbeitete der Tabelle einen Satz Breite in Pixel zu geben, oder die Tabelle Anzeige einzustellen: Block .

Answer 8

Ich habe es getan.

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

Sie werden xs-Bildschirm (Beispiel aus meiner app) erhalten:

Answer 9

Für mich war es der 'min-width' Wert in Körperelement die Reaktionsfähigkeit dieser Klasse zu brechen .