使一个非常宽的div水平滚动而不影响页面的其余部分

Question

我正在尝试在这样布置的页面中显示表格

但是，对于真实数据（尤其是在移动设备上），该图表将大大超过屏幕尺寸。

这是我的目标。我希望垂直滚动能够按预期工作。如果添加更多行，则页面滚动的时间会更长……太棒了！

但是，我希望在水平方向上感觉像只有表格内容在水平滚动。因此，基本上我不希望页眉/页脚或搜索栏，标题或页面上的任何其他HTML内容水平滚动。我希望它表现得好像没有一张很宽的桌子。但是，当然，我希望表格尝试使其居中并在需要时水平滚动。

我尝试了overflow-x: scroll，但由于整个页面突然滚动，因此无法正常工作。目的是让表格可以水平滚动。

Answer 1

尝试一下

Array

Answer 2

设置元素的宽度，并根据要滚动元素的方式（垂直或水平）将overflow-x或overflow-y添加到“滚动”

Answer 3

设置width:500px并添加overflow-x:auto

Answer 4

您是否正在使用引导程序？然后尝试

<div class = "overflow-auto"></div>

否则，对于纯CSS，请确保包含position属性：

.theDiv{
position: fixed;
overflow-x: scroll;
}