Responsive Tabelle Probleme in Bootstrap

Question

Ich versuche, meine Tabelle in Bootstrap reaktionsfähig zu machen. Mein Problem ist, dass wenn die Fenstergröße kleiner wird ... ich die Seite selbst statt der Tabelle scrollen muss. Ich möchte es so machen, dass der Tisch nicht die Seite scrollt. Ich habe ansprechendes Styling für ansprechende Tabellen in Bootstrap

HTML verwendet:

<div class="wrapper"> 
    <div class="main"> 
    <div class="table-responsive"> 
     <table class="table" id="roleTable"> 
     <thead> 
      <tr> 
      <th>User</th> 
      <th>Email</th> 
      <th>Phone</th> 
      <th>Options</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="{{this.uid}}"> 
      <td>Name 1</td> 
      <td>Email 1</td> 
      <td>Phone Number 1</td> 
      <td> 
       <div class="dropdown"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Please Select 
        <span class="caret"></span></button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Option 1</a></li> 
        <li><a href="#">Option 2</a></li> 
        <li><a href="#">Option 3</a></li> 
       </ul> 
       </div> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
</div> 

CSS:

html, body, .wrapper { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

.wrapper { 
    display: table; 
    max-width: 500px; 
    margin: 0 auto; 
} 

.wrapper .main { 
    display: table-cell; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    vertical-align: middle; 
} 

Update:

I Tabellen vertikal auf der Seite bin mit ausrichten der Inhalt auf der Seite.

JSFiddle Demo

Answer 1

Sie könnten dies mit Überlauf erreichen.

Fügen Sie einfach table tbody { overflow: auto; }

https://jsfiddle.net/f061pk27/1/