Html 保持容器固定，并在调整窗口大小时显示水平滚动条

我的

容器中有两个元素：Canvas和Table。我希望这些元素有固定的位置，当窗口大小低于容器的宽度时，应该显示一个水平滚动条

当我尝试调整窗口大小时，表格会移动到下一行。下面是我的示例代码的链接。这两个要素应该并排存在

---

jsIDLE:

在画布和表的直接容器上添加最小宽度

这应该无关紧要，但将表的容器更改为display:block，而不是display:inline块。同时添加一个float:left

在包含浮动元素的容器末尾附加一个

，以确保容器具有正确的高度，否则容器上的高度为0px

修改您的示例：

...

在画布和表格的直接容器上添加最小宽度

这应该无关紧要，但将表的容器更改为display:block，而不是display:inline块。同时添加一个float:left

在包含浮动元素的容器末尾附加一个

，以确保容器具有正确的高度，否则容器上的高度为0px

修改您的示例：

...

为画布和表格的父级应用宽度。在这里，我尝试为“.tableAreaWrapperSub”应用958px的宽度，效果很好。

---

应用的宽度应该是画布和桌子的宽度加上边距/填充物或边框（如果有）的总和。

为画布和桌子的父级应用宽度。在这里，我尝试为“.tableAreaWrapperSub”应用958px的宽度，效果很好。 应用的宽度应该是画布和桌子的宽度加上边距/填充物或边框（如果有）的总和。

添加以下CSS-

.tableAreaWrapperSub {
    min-width: 1000px;
    overflow-x: scroll;
}

直接父容器必须设置为overflow-x scroll。此外，它还必须有一个最小宽度，这样，如果浏览器宽度小于此值，它将显示一个滚动条

更新的fiddle-

添加以下CSS-

.tableAreaWrapperSub {
    min-width: 1000px;
    overflow-x: scroll;
}

直接父容器必须设置为overflow-x scroll。此外，它还必须有一个最小宽度，这样，如果浏览器宽度小于此值，它将显示一个滚动条

更新小提琴-