gpt4 book ai didi

css - 如果使用 Bootstrap 表格响应溢出,则滚动表格

转载 作者:太空宇宙 更新时间:2023-11-04 05:44:06 32 4
gpt4 key购买 nike

我有一个简化的布局:

  • 有一个 flex 布局,在左侧包含一个 nav,使用 15% 的 View 宽度。
  • 有一个 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>

最佳答案

看起来这种行为的原因是因为 table-responsive不“尊重”(按照你想要的方式)display: flex child ( <main> 在你的情况下)因为 d-flex child 没有width , 所以 <main> 的宽度扩展到其可用的全宽。

所以有两种方法可以修复它,要么简单地删除 <main>包装器,或将宽度设置为 <main> (见代码片段)。由于您的 <nav>设置为 15vw , 给出 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>

关于css - 如果使用 Bootstrap 表格响应溢出,则滚动表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58881578/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com