div 容器內的 HTML 表 scollbar 問題

Question

我正在為大多數 CSS 使用引導程序。 我將一個部分分為兩列，在左列顯示一個包含一些數據的表格，在右側顯示一個 Google map。問題是當表格行增長時表格沒有自然顯示滾動條。 我嘗試使用 CSS 來控制滾動條，但正如您在圖像中看到的那樣，它無法正常工作。

滾動條有兩個問題，第一個與實際表格相去甚遠，根據我的猜測，這是因為我在父div容器上設置滾動條。 第二個問題是，當我嘗試使用鼠標滾輪滾動它時，表格開始閃爍。我無法解決這個問題。 這是我的代碼。

HTML 零件

我已經刪除了不相關的部分

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

表相關 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

您在容器和表格中添加了高度和溢出：

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

您不需要在表格中添加溢出和高度屬性。 保持這樣的狀態：

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

我在下面的小提琴中改進了你的代碼。 全屏打開它以查看最佳效果。

 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>