将 css table 单元格推出浏览器 window

Question

我正在设计一个布局，其中 css table 中的不同单元格应该相互推出浏览器 window，如果它们的大小增加。单元格的内容通过 ajax 动态加载。很难描述，所以我做了一个草图：

这是csstable的初始状态：

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

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

我希望这能让你明白，否则我会尝试更详细地描述它。提前致谢！

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 并尝试。

将 css table 单元格推出浏览器 window

Push css table cell out of browser window

html

css

css-tables