I am working on a layout that involves:
- A flex layout with a
navon the left side taking up 15% of the view width. - A
mainsection occupying the rest of the horizontal space.
In one particular view, I have a table within the main section that exceeds the available space. My goal is to scroll the table horizontally without affecting the entire page. I tried wrapping the table with table-responsive using Bootstrap, but this solution added a scrollbar for the entire page instead of just the table or main content area as desired. Even though table-responsive seems to offer the functionality I need, it's not behaving as expected in my case and I suspect I might be overlooking something.
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>
...
</tr>
</thead>
<tbody>
<tr>
<th>Column Name</th>
<td>value</td>
<td>value</td>
...
</tr>
...
</tbody>
</table>
</div>
</main>
</div>