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

Question

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

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

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

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

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

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

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

Answer 1

只需在 div 上设置 height 属性即可：

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

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