html - Bootstrap 中的响应表问题

Question

我正在尝试让我的表格在 bootstrap 中响应。我的问题是，当窗口尺寸变小时......我必须滚动页面本身而不是表格。我想让表格滚动而不是页面。我在 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

Answer 1

您可以使用溢出来实现这一点。

只需添加 table tbody { overflow: auto; }

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