如何阻止此 div 的宽度减小？

Question

我在 div 中有一个 HTML table。我希望 div 的宽度能够动态减小，而无需包装其任何内容，也不会增加高度。相反，我只想有一个水平滚动条，没有垂直滚动条。

Here is my JSFiddle demo（请不要介意乱七八糟的 HTML - 它是使用 ASP .NET MVC Razor 生成的）。

你可以通过我的 CSS 看到，我尝试在外部 div 上使用 overflow-x: scroll，但它并没有完全奏效。

请告诉我如何阻止 div 的内容调整大小。谢谢。

编辑：div 中 table 的内容是动态的，因此硬编码宽度在这里不起作用。

Answer 1

尝试将此用于您的 CSS:

#container {
    max-height: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    max-width: 350px;
}

将 350px 更改为您想要的任何内容。 overflow-y: hidden; 行删除垂直滚动条，max-width 行设置元素宽度的上限。

Answer 2

设置它以防止文本换行。

#container {
    ...
    white-space: nowrap;
}

Answer 3

如您所说，您不希望 table 的内容被换行，因此您可以使用如下内容：

#container table * {
    white-space: nowrap;
}

而且我认为你不需要 overflow-x: scroll; 你可以使用 overflow-x: auto; 溢出只会在必要时出现。

How do I stop this div's width from decreasing?