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>
我的布局经过简化:具有一个灵活的布局,其左侧包含一个导航栏,占用了视图宽度的15%。有一个主要占用剩余的水平空间。对于一个视图,我有一个...
table-responsive
不尊重display: flex
子级(在您的情况下为<main>
),所以<main>
的宽度扩展到了其可用的全宽。 因此,有两种方法可以修复它,要么简单地删除<main>
包装器,要么给<main>
设置宽度(请参见代码段)。由于您的<nav>
设置为15vw
,因此给您的班级min-width:85%
分配max-width:85%
,width:85%
甚至是<main>
应该会给您所需的行为。