Question

我正在尝试使我的表在引导程序中响应。我的问题是，当窗口大小变小时......我必须滚动页面本身而不是表格。我想这样做，所以桌子不滚动页面。我在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/

Answer 2

用于解决Safari中的响应表问题：

 .table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
min-height: .01%;
overflow-x: auto;
}

引导程序中的响应表问题

2 个答案: