Responsive table issues in bootstrap

问题

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

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 am using tables on the page to vertically align the content on the page.

JSFiddle Demo

回答1:

You could achieve this using overflow.

Just add table tbody { overflow: auto; }

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

来源：https://stackoverflow.com/questions/38701408/responsive-table-issues-in-bootstrap