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

标签 html css

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

enter image description here

但是,对于真实数据(尤其是在移动设备上),图表将比屏幕尺寸宽得多。

这是我的目标。我希望垂直滚动能按预期工作。如果添加更多行,页面会变得更长,你滚动......太棒了!

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

我试过 overflow-x: scroll 但它不起作用,因为突然整个页面都在滚动。目标是让表格可以水平滚动。

最佳答案

试试这个

<div style="width: 100vw; overflow-x: auto;">
    <table>
    </table>
</div>

关于html - 使一个非常宽的 div 水平滚动而不影响页面的其余部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59101065/

相关文章:

javascript - 在 JS 中键入时替换输入值

javascript - Vuejs 中的属性突变

html - 了解没有 CSS 的浏览器默认设置如何工作

php - 如何将 HTML 页面布局保存为 PDF

html - 为什么我的图像在屏幕尺寸减小时没有响应?

javascript - 在 CSS 中复制 Flash 立方体旋转 : Preserve correct perspective

php - html下拉列表选项

html - 汉堡菜单始终显示,即使在桌面上也是如此

css - 当 Wrapper 较小时 Angular 改变 flex 方向

html - 如何允许背景图像水平滚动?