I am trying to create a container with both horizontal and vertical overflow using the "auto" value. I want the content inside this container, which will mainly consist of large tables, to be scrollable within a window. It would be ideal if this container could seamlessly integrate with Bootstrap 4's grid system using the "col" and "row" classes. I prefer not to set hardcoded height and width values.
Although I initially believed the following code would achieve this effect, it does not seem to work as expected:
.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>
<!-- I render a table into dvData via backend code-->
<div class="overflow-table">
<div id="dvData">
<table class="overflow-table"> <!-- I attempted something similar to this-->
</div>
</div>
Any help or suggestions are greatly appreciated. Thank you!