html - Responsive table issues in bootstrap -

i trying make table in bootstrap responsive. issue when window size becomes smaller... have scroll page instead of table. want make table scrolls not page. have used responsive styling responsive tables in 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; } 

update:

i using tables on page vertically align content on page.

jsfiddle demo

you achieve using overflow.

just add table tbody { overflow: auto; }

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