页面调整大小时强制两个表在一个 div 中粘在一起

Posted 2023-03-05

【中文标题】页面调整大小时强制两个表在一个 div 中粘在一起

【英文标题】：Force two tables stick together in a div when page resize

【发布时间】：2018-08-18 20:06:25

【问题描述】：

我有一个包含两个 html 表的 div。当浏览器最大化时，两个表格并排放置。当我减小页面大小时，其中一个位于另一个之下。在任何情况下如何强制这两个表粘在一起。

div
    width: 100%;


.table1 
    width: 10%;
    float: right;
    margin: 0 auto;
    padding: 0;
    overflow:hidden;


.table2 
    width: 90%;
    float: left;
    margin: 0 auto;
    padding: 0;
    overflow:hidden;


<div>
    <table class="table1">...</table>
    <table class="table2">...</table>
</div>

【问题讨论】：

将table-layout: fixed; 添加到两个表中

"当浏览器最大化时，两个表格并排放置。"这是不正确的，目前，两个表格会粘在一起，因为它们的宽度是 10% 和 90%，占据了 div 中的所有空间。

【参考方案1】：

你为什么不使用 flex ？

    div
    display: flex;
    flex-direction: row;

【参考方案2】：

试试这个

我使用flex for table parent(div)。

flex-direction: row-reverse; ，到 table1 到右侧。

div 
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

table 
  height: 75px;

.table1 
  width: 10%;
  padding: 0;
  overflow: hidden;
  background: red;

.table2 
  width: 90%;
  padding: 0;
  overflow: hidden;
  background: green;

<div>
    <table class="table1"></table>
    <table class="table2"></table>
</div>

了解更多关于FLEX

【讨论】：

感谢您的回复。现在，我又面临两个问题。尽管我已将宽度设置为 90%，但较大的表格仅占页面宽度的一半。还有有什么办法可以在页面缩小的时候增加一个水平滚动条。谢谢。