javascript - 始终在溢出表的屏幕上显示水平滚动条

Question

我有一些包含大量数据的表(它们应该是原始数据表)，因此它们具有水平和垂直滚动。

我使用带有 overflow-x: auto; 的 div 强制在表格上水平滚动，并设置列的宽度。

垂直滚动使用默认的浏览器滚动，但我不喜欢使用浏览器的滚动进行水平滚动，因为它会滚动不应该离开屏幕的内容，例如过滤器或分页。

问题是要使用 div 水平滚动，我必须滚动到页面底部。

像这样 https://jsfiddle.net/Denuro/wsmofbvj/3/

有什么办法可以让div始终显示水平滚动条吗？

我知道我可以为表格使用固定高度，但我认为这是一个次优解决方案，因为我失去了页面上过滤器和分页的高度。

Answer 1

只需设置 div 的高度属性:

div {
  overflow-x: auto;
  height: 200px; // or whatever
}

示例:https://jsfiddle.net/20xdh7na/