html - 表格在 Div 中的响应式设计

Question

我想要实现的可能是非常业余的，但我仍然被困住了。我的目标是将一系列表格排成一排，当屏幕尺寸缩小时，表格会根据需要下降一排以腾出空间。我已经设法实现了这一目标，但表格的容器未按预期运行。

http://imgur.com/OhLduSi

图片 1:在第一张图片中，两个表格都可以放在同一行的页面上，并且容器适合内容(表格)。

图片 2:一旦表格落下(因为没有空间容纳它)，容器就不会做出正确 react 并缩小尺寸以适应现在更小的列。

我目前的设置基本上是

<div class="green">
   <div class="red"><table></table></div>
   <div class="red"><table></table></div>
</div>

div 是具有自动左右边距的内联 block 。表格也设置为内联 block 。

感谢您的宝贵时间和帮助。

Answer 1

如果这就是您要找的，请告诉我，试试下面的 CSS:

.green{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
.red{
  display: inline-block;
}
table{
  border: 1px solid black;
  width: 300px;
}

您可以将绿色类的宽度与您希望父容器的任何宽度互换。您的父容器和您的表格有宽度，否则浏览器将不知道何时在新行上显示表格。

这是一个codepen

以防万一你想看 flexbox版本，这里是 css:

.green{
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
table{
 border: 1px solid black;
 width: 300px;
}