bootstrap 4 溢出容器

Question

我的目标是创建一个具有 overflow x 和 overflow y 以及 auto 的容器，因为我将在那里渲染的内容（大表）客户端应该看到 "window" 具有可滚动的内容 + 如果该容器与 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

在 table 周围的 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

bootstrap 4 溢出容器

overflow container with bootstrap 4

css

overflow

bootstrap-4