HTML表格的浮动水平滚动条 [英] Floating horizontal scroll bar for html table

问题描述

我有一个很高的html表.网页必须垂直滚动才能到达表格底部的滚动条.如果在用户滚动页面并且表格可见时，我可以在浏览器窗口的底部浮动表格的水平滚动条，那就太好了.这样的事情可以做吗?

I have an html table that is very tall. The web page has to be scrolled vertically to reach the scroll bar at the bottom of the table. It would be nice if I could float the horizontal scroll bar for the table at the bottom of the browser window while the user is scrolling the page and the table is visible. Can such a thing be done?

以下是这种情况的jsFiddle示例: http://jsfiddle.net/RurTZ/1/

Here is a jsFiddle example of the situation: http://jsfiddle.net/RurTZ/1/

推荐答案

网格建议@KDavid撰写的文章很好，但是如果您要找点轻巧的东西，我的 floatingScrollbar jQuery可以帮助我成功插件(演示).

The Grid suggestion by @KDavid is good, but if you're looking for something a bit lighter I had success with the the floatingScrollbar jQuery plugin (demo).

确保已加载插件JS后，魔术调用就会发生:

After making sure the plugin JS is loaded, the magic call happens:

$('.your-div').floatingScrollbar();

我还必须将div CSS设置为:

I also had to set the div CSS to:

.your-div {
  overflow-x: auto;
  width: 100%;
}

这是您的jsFiddle的分支，可以正常工作: http://jsfiddle.net/RxTQM/1/

Here is a fork of your jsFiddle with it working: http://jsfiddle.net/RxTQM/1/

这篇关于HTML表格的浮动水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！