I'm utilizing Bootstrap for the majority of my CSS. I've split a section into two columns, with the left column displaying a table with data and the right side featuring a Google map. The issue arises when the table row grows, as it doesn't naturally display a scrollbar. Despite my attempts to control the scrollbar using CSS, it's not functioning properly, as depicted in the image. https://i.sstatic.net/AhzFc.png
There are two main problems with the scrollbar. First, it's far from the actual table, which I assume is due to setting the scrollbar on the parent div container. Second, when trying to scroll using the mouse wheel, the table starts flickering. I'm struggling to find a solution to this issue.
Here is the code snippet:
HTML Part
I've omitted irrelevant sections.
<main class="flex-shrink-0">
<div class="container" style="max-width: 100% !important;">
<section>
<div class="row">
<div class="col">
<div class="container" style="overflow-y:auto;overflow-x:auto;;height:400px;width: 100%;">
<table class="" width="100%" style="overflow:auto;height:400px;width:100%;">
<thead>
<tr>
<th>#</th>
<th>Code</th>
<th>Size</th>
<th>Illumination Type</th>
<th>Location</th>
<th>Availability</th>
<th>Media</th>
</tr>
</thead>
<tbody>
{% for hoarding in road_hoardings %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{hoarding.site_code}}</td>
<td>{{hoarding.size}}</td>
<td>{{hoarding.illumination_type}}</td>
<td>{{hoarding.location}}</td>
<td>{{hoarding.available_by_date}}</td>
<td>
<button class="btn btn-primary">
<i class="far fa-images"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="col">
<div id="map" style="width: 100%; height: 100%;"></div>
</div>
</div>
</section>
</div>
</main>
Table Related CSS
body {
/* overflow-x: hidden; */
margin: 0;
background: linear-gradient(45deg, #49a09d, #5f2c82);
font-family: sans-serif;
font-weight: 100;
}
table {
width: 800px;
/* height: 400px; */
/* border-collapse: collapse; */
/* overflow: hidden;
overflow-y: auto; */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
th,
td {
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
th {
text-align: left;
}
thead th {
background-color: #55608f;
}
tbody tr:hover {
background-color: rgba(255, 255, 255, 0.3);
}
tbody td {
position: relative;
}
tbody td:hover:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255, 255, 255, 0.2);
z-index: -1;
}