Question

有没有一种简便的方法可以使表1不会随着屏幕变小而与表2重叠。

这是我的表格当前的格式：

   <div style="width: 100%;">
     <div style="width: 15%; float: left;">
     <table class="display table table-responsive" id="smart_table" width="100%">
    </table> </div>
     <div style="width: 85%; float: left;">
    <table id="example" class="display table-responsive" width="100%">
    </table></div></div>

编辑：由于我的高级理论对一个问题太宽泛，因此可以将其删除（不会让我）。谢谢

Answer 1

可能的解决方法是flexbox

  <div style="display: flex">
     <div style="flex: 1; overflow: auto;">
       <table class="display table table-responsive" id="smart_table" width="100%">
       </table> 
     </div>
     <div style="flex: 4; overflow: auto;">
       <table id="example" class="display table-responsive" width="100%">
       </table>
     </div>
   </div>

请参见codepen

Answer 2

将包裹div（列？）的表设置为具有display:inline-block 并更改表格的宽度属性，以使它们彼此相邻。

Answer 3

您可以在主容器中添加一个溢出属性，以防止两个div重叠。

<div style="width: 100%;overflow: hidden;">

但是，您的第二张桌子将被推到第一张桌子的下方。

随着屏幕变小，使两个并排的表不重叠

3 个答案: