title: Responsive table issues in bootstrap
body: <p>I am trying to make my table in bootstrap responsive. My issue is that when the window size becomes smaller... I have to scroll the page itself instead of the table. I want to make it so the table scrolls not the page. I have used responsive styling for responsive tables in bootstrap</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="main"&gt;
      &lt;div class="table-responsive"&gt;
        &lt;table class="table" id="roleTable"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;User&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
              &lt;th&gt;Options&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr id="{{this.uid}}"&gt;
              &lt;td&gt;Name 1&lt;/td&gt;
              &lt;td&gt;Email 1&lt;/td&gt;
              &lt;td&gt;Phone Number 1&lt;/td&gt;
              &lt;td&gt;
                &lt;div class="dropdown"&gt;
                  &lt;button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"&gt;Please Select
                    &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>I am using tables on the page to vertically align the content on the page.</p>
  
  <p><strong><a href="https://jsfiddle.net/f061pk27/" rel="nofollow">JSFiddle Demo</a></strong></p>