自舉中的響應表問題

我試圖讓我的表在bootstrap響應。我的問題是，當窗口大小變小...我必須滾動頁面本身，而不是表格。我想讓它滾動而不是滾動頁面。我已經在啓動時使用響應造型爲響應表自舉中的響應表問題

HTML：

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

更新：

我現在用的是頁面上的表，以垂直對齊頁面上的內容。

JSFiddle Demo

來源

2016-08-01 user4756836