前端之家

  1. 首页
  2. 问答

使用Bootstrap表格响应式滚动表格（如果溢出）

• 问答

我的布局经过简化：

  • 具有一个灵活的布局，其左侧包含nav，使用视图宽度的15％。
  • 有main占用了剩余的水平空间。

对于一个视图，我有一个表所占空间超过main内部的可用空间。我想水平滚动表格，而不是整个页面。我尝试通过使用Bootstrap用table-responsive包装表来做到这一点，但是，这仍然为整个页面放置了滚动条，而不仅仅是我想要的表/主要元素。 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>

mameng125 回答：使用Bootstrap表格响应式滚动表格（如果溢出）

该行为的原因似乎是因为table-responsive不“尊重”（按照您想要的方式）display: flex个孩子（在您的情况下为<main>），因为{{ 1}}子级没有d-flex，因此width的宽度被扩展到其可用的全宽。

因此，有两种方法可以对其进行修复：要么简单地删除<main>包装器，要么将宽度设置为<main>（请参见代码段）。由于您的<main>设置为<nav>，因此，给班级15vw分配min-width:85%，max-width:85%甚至width:85%应该可以给您所需的行为。

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

<main>
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;
}

,

我建议将表包装为

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

消除了“整个页面”滚动条，并为您提供了引导表，看起来应该是这样。 （这就是我解决的方式） 在这种情况下，也不需要表响应。

我无法评论所选答案，因此我将在此处发表评论：

display: flex

消除了引导表水平滚动条，而使您具有“整个页面”滚动条。这意味着要向下滚动，您将不得不一直向右滚动才能找到y滚动条。还可以找到按钮，搜索，列选择等。

bootstrap-4bootstrap-tablecss
本文链接：https://www.f2er.com/3093771.html

大家都在问