I'm looking for a way to create two columns with two tables using Bootstrap 4.1. I want the right table to be fixed with auto overflow, but when I try to do this, the table does not span the full width of the column. Are there any bootstrap solutions or other methods to achieve this?
This is how it should work: when a user selects a row in the left table, additional data should be loaded and displayed in the right table.
#table_div {
position: fixed;
height: 100vh;
overflow: auto;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row my-3">
<div class="col-6">
<table class="table table-sm table-hover">
<thead>
<tr>
<th scope="col">r1</th>
<th scope="col">r2</th>
<th scope="col">r3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
(more table data here)
</tbody>
</table>
</div>
<div class="col-6">
<div>
<div id="table_div">
<table class="table table-sm table-hover" id="my_table">
<thead>
<tr>
<th scope="col">r1</th>
<th scope="col">r2</th>
<th scope="col">r3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
(more table data here)
</tbody>
</table>
</div>
<div></div>
</div>
</div>
</div>
</div>REAL DATA - https://jsfiddle.net/hdb1783y/4/