使用 Bootstrap table-responsive 滚动 table if overflow

Question

我有一个简化的布局：

具有包含左侧 nav 的 flex 布局，该布局使用 15% 的视图宽度。
有一个 main 占据剩余的水平 space。

一方面，我有一个 table 比 main 中可用的 space 多。我想水平滚动 table，而不是整个页面。我已经尝试通过使用 Bootstrap 将 table 和 table-responsive 包装起来来做到这一点，但是这仍然会为整个页面放置一个滚动条，而不仅仅是我想要的 table/main 元素。 table-responsive 听起来它完全符合我的要求，但就我而言，它并没有像我期望的那样工作，我怀疑我遗漏了什么。

div.main {
  display: flex;
  min-height: 100%;
}

div.main>nav {
  background-color: coral;
  flex: 0 0 15vw;
}

div.main>main {
  flex: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="main">
  <nav>
  </nav>
  <main>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th></th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

Answer 1

看起来这种行为的原因是因为 table-responsive 没有 "respect"（以你想要的方式）到 display: flex children（<main> 在你的例子中）因为 d-flex children 没有 width，所以 <main> 的宽度被扩展到它的可用全宽。

所以有两种方法可以修复它，要么简单地删除 <main> 包装器，要么将宽度设置为 <main>（参见代码片段）。因为你的 <nav> 设置为 15vw，给你的 class min-width:85%，max-width:85% 甚至 width:85% 应该给 <main>你想要的行为。

我个人推荐第一种方法，因为我不确定这是默认的 Bootstrap 行为还是错误。

div.main {
  display: flex;
  min-height: 100%;
}

div.main>nav {
  background-color: coral;
  flex: 0 0 15vw;
}

div.main>main {
  min-width: 85%;
  flex: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="main">
  <nav>
  </nav>
  <main>
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th></th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
            <th>Header Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
          <tr>
            <th>Column Name</th>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

Answer 2

我建议将 table 换成

<div class="overflow-hidden">
</div>

消除了“整个页面”滚动条，只留下 bootstrap-table 滚动条，看起来应该是这样。（我就是这样解决的） table-在这种情况下也不需要响应。

我无法评论 select 编辑的答案，所以我会 post 我的评论在这里：

display: flex

消除了 bootstrap-table 水平滚动条，并为您留下“整个页面”滚动条。这意味着要向下滚动，您必须一直向右滚动才能找到 y 滚动条。还可以找到按钮、搜索、列 select 等等

使用 Bootstrap table-responsive 滚动 table if overflow

Scrolling a table if overflow using Bootstrap table-responsive

css

bootstrap-table

bootstrap-4