防止 table 内部的 div 超出父级的大小

Question

我正在处理一个需要 table 的页面，如果 table 变得比其父级更宽，它将在父级 div 内水平滚动。

不幸的是，我正在构建它的平台将我的代码放在父 table 单元格中，这破坏了它。似乎即使我将 table 放在 div 中（并在 div 上设置 overflow-x: scroll），平台插入的父 table 单元格将扩展到超过页面大小以包含子项。

我在这里制作了一个 fiddle 的样子： http://jsfiddle.net/d3e9esL5/

... 以及我想要的 fiddle 此处的样子（没有外部 table）： http://jsfiddle.net/4budchj6/

显然删除外部 table 可以解决此问题，但不幸的是，由于我正在使用的平台，我无法这样做。如果我能避免将样式应用到外部 table 也是最好的，因为该标记不在我的控制之下。

有什么方法可以在不更改外部 table 的标记或样式的情况下按我想要的方式设置样式吗？

Answer 1

当您使用 overflow-x 时，您还必须指定 max-width（或 width）。

如果你这样写：

.flex-table {
    overflow-x: auto;
    max-width: 250px;
}

您将有一个 table 永远不会大于 250px，只有在需要时才显示水平滚动条。

prevent div inside of table from expanding beyond parent's size