html - 防止表内的 div 超出父级的大小

Question

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

不幸的是，我正在构建它的平台将我的代码放在父表单元格中，这破坏了它。似乎即使我将我的表放在一个 div 中(并在该 div 上设置 overflow-x: scroll)，平台插入的父表单元格也会扩展到超过页面的大小包含 child 。

我在这里做了一个 fiddle : http://jsfiddle.net/d3e9esL5/

...以及我希望这里看起来像的 fiddle (没有外表): http://jsfiddle.net/4budchj6/

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

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

Answer 1

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

如果你这样写:

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

您将拥有一个绝不会大于 250px 的表格，只有在需要时才显示水平滚动条。