div 容器内的 HTML 表 scollbar 问题

Question

I am using the bootstrap for most CSS. I have divided a section into two columns, In left column showing a table with some data & on right side a Google map.The problem is that the table not showing scrollbar naturally when the table row grows. I have tried to control the scrollbar using the CSS but it is not working properly as you can see in the image.

There are two problems with scrollbar, first is far from the actual table & as per my guess it is because I am setting scrollbar on the parent div container. The second issue is that when I try to scroll it using the mouse wheel then the table starts flickering.I can't get my head around to solve this problem. Here is my code.

HTML Part

I have removed the irrelevant parts

<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;
        }

Answer 1

You have added height and overflow in the container as well as table:

<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%;">

You don't need to add overflow and height property in the table. Just keep it like this:

<table class="" width="100%" style="width: 100%;">

I have improved your code in below fiddle. Open it in full screen to see the best result.

 body { /* overflow-x: hidden; */ margin: 0; background: linear-gradient(45deg, #49a09d, #5f2c82); font-family: sans-serif; font-weight: 100; } table { width: 800px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } 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; }

 <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="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> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> <tr> <td>1</td> <td>123</td> <td>20</td> <td>Type 1</td> <td>Location 1</td> <td>Date</td> <td><button class="btn btn-primary">Click</button></td> </tr> </tbody> </table> </div> </div> <div class="col"> <div id="map" style="width; 100%: height; 100%;"></div> </div> </div> </section> </div> </main>