jQuery 使用jQuery的可滚动表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/583102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:23:22  来源:igfitidea点击:

Scrollable Table using jQuery

jquerycssjquery-uijquery-plugins

提问by Saneef

Is there any good and light jQuery plugin out there make Scrollable Tables.

有没有什么好的轻量级 jQuery 插件可以制作 Scrollable Tables。

I got one at http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.htmlbut that won't working non-IE and non-FF browsers.

我在http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html 上得到了一个,但这在非 IE 和非 FF 浏览器中不起作用。

Thanks!

谢谢!

回答by Dan Lew

If you're looking for light code, skip the jQuery altogether and use pure HTML/CSS:

如果您正在寻找轻量级代码,请完全跳过 jQuery 并使用纯 HTML/CSS:

<table>
    <thead>
        <tr><th>Header Item 1</th><th>Header Item 2</th></tr>
    </thead>
    <tfoot>
        <tr><th>Footer Item 1</th><th>Footer Item 2</th></tr>
    </tfoot>
    <tbody style="overflow-y: scroll; overflow-x: hidden; height: 100px;">
        <tr><td>Item 1-1</td><td>Item 2-1</td></tr>
        ...
        <tr><td>Item 1-N</td><td>Item 2-N</td></tr>
    </tbody>
</table>

The key is in setting the overflow CSS in tbody, so as to make that part scrollable (but not the entire table). You'll also need to set the height, so you can define how tall the scrollable section should be.

关键是在 tbody 中设置溢出 CSS,以便使该部分可滚动(但不是整个表格)。您还需要设置高度,以便定义可滚动部分的高度。

回答by Graeck

Here's one that works well: http://www.farinspace.com/jquery-scrollable-table-plugin/

这是一个运行良好的:http: //www.farinspace.com/jquery-scrollable-table-plugin/

And since it was mentioned above, here's a pure HTML/CSS cross-browser solution: http://www.imaputz.com/cssStuff/bigFourVersion.html

并且由于上面提到过,这里是一个纯 HTML/CSS 跨浏览器解决方案:http: //www.imaputz.com/cssStuff/bigFourVersion.html