css - 带有 bootstrap 4 的溢出容器

Question

我的目标是创建一个具有 overflow x 和 overflow y 以及 auto 的容器，因为我将在那里渲染的内容(大表) 客户端应该会看到一个包含可滚动内容的“窗口”+ 如果该容器与 bootstrap 4 col 和 row 一起工作，那就更好了。我不想硬编码高度和宽度。

我认为代码应该可以工作，但它没有

.overflow-table {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.overflow-table .row {
    display: block;
}

<div class="overflow-table">
    <div id="dvData"></div>
</div>
<!-- to dvData I render at code behind table--> 

<div class="overflow-table">
    <div id="dvData">
         <table class="overflow-table"> <!-- I try too something like this-->
    </div>
</div>

谢谢!!

solution

Answer 1

在表格周围的 div 上设置一个 max-width 和 max-height。使用 vw 和 vh 单位或百分比以避免硬编码宽度和高度。

.window-overflow {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 95vh;
    max-width: 100%;
}

https://codepen.io/nickfindley/pen/QzGWPb