I am attempting to use a fixed-width div as a left side bar. The main content on the right of the side bar renders correctly unless there is a table with many columns. In this case, it overflows exactly the width of the side bar before the scroll bar is available. How can I fix this issue?
I've tried a couple layouts. The closest success was setting the table's max-width to calc(100% - 248px): https://jsfiddle.net/t0qhoz1e/. This works if the table is overflowing. However, there might not always be columns or rows in my application long enough to cause overflow. In that case, there is a 248px gap on the right: https://jsfiddle.net/euad3q71/. Removing the side bar also causes the table to render properly, but I would really like to have it. Any help or pointers appreciated, thanks.
.wrapper {
height: 100vh;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container-fluid d-flex p-0 wrapper">
<div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 248px;">side bar</div>
<div class="container-fluid d-flex flex-column">
<div class="row">some table controls</div>
<div class="table-responsive card flex-fill">
<table class="table">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
<th>Column6</th>
<th>Column7</th>
<th>Column8</th>
<th>Column9</th>
<th>Column10</th>
<th>Column11</th>
<th>Column12</th>
<th>Column13</th>
<th>Column14</th>
<th>Column15</th>
<th>Column16</th>
<th>Column17</th>
<th>Column18</th>
<th>Column19</th>
<th>Column20</th>
</tr>
</thead>
<tbody>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
<tr>
<th>row</th>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class="row">some pagination controls</div>
</div>
</div>The responsive table wrapper needs to know its limits. Do that by managing overflow on the element around it. I've added Bootstrap's overflow-hidden class.
I've also added columns to the rows above and below the table because their negative side margins were causing issues. You may not actually want to use rows there.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container-fluid d-flex p-0 wrapper">
<div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 248px;">side bar</div>
<div class="d-flex flex-column overflow-hidden">
<div class="row">
<div class="col">some table controls</div>
</div>
<div class="card flex-fill table-responsive">
<table class="table">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
<th>Column6</th>
</tr>
</thead>
<tbody>
<tr>
<th>row</th>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col">some pagination controls</div>
</div>
</div>
</div>