html - 将css表格单元格推出浏览器窗口

Question

我正在研究一个布局，如果 css 表中的不同单元格的大小增加，则它们应该将彼此推出浏览器窗口。单元格的内容是通过 ajax 动态加载的。很难描述，所以我画了一个草图：

这是 css 表的初始状态：

如果单元格 1 的宽度增加，它应该超出浏览器窗口：

但如果单元格 3 的宽度增加，则应该将其他单元格推到浏览器窗口之外：

我希望这可以说清楚，如果不是，我将尝试更详细地描述它。提前致谢！

标签： htmlcsscss-tables

Answer 1

这是你想要的吗？

#parent {
  background-color: khaki;
  height: 200px;
  margin-top: 100px;
  display: flex;
  flex-direction: row-reverse;
  /* comment it out to remove the scrollbar */
  overflow: auto;
}

#left-child {
  margin: 50px 10px 0 0;
  background-color: coral;
  height: 100px;
  order: 3;
  /* change min-width to change the width of the div */
  min-width: 1000px;
  /* min-width: 100px; */
}
#middle-child {
  margin: 50px 10px 0 0;
  background-color: lightblue;
  height: 100px;
  order: 2;
  /* change min-width to change the width of the div */
  min-width: 1000px;
  /* min-width: 100px; */
}
#right-child {
  margin: 50px 10px 0 0;
  background-color: lightgreen;
  height: 100px;
  order: 1;
  /* change min-width to change the width of the div */
  min-width: 1000px;
  /* min-width: 100px; */
}

<div id="parent">
  <div id="left-child"></div>
  <div id="middle-child"></div>
  <div id="right-child"></div>
</div>

去这个jsfiddle试试。