可滚动表使用jQuery [英] Scrollable Table using jQuery

问题描述

我有一个在 http://www.webtoolkit.info/scrollable-html-table-plugin-for-jquery.html 但是

解决方案

/ div>

如果你正在寻找光代码，跳过jQuery完全使用纯HTML / CSS：

  < table> 
< thead> 
< tr>< th>标题项目1< / th>< th>标题项目2< / th>< / tr> 
< / thead> 
< tfoot> 
< tr>< th>页脚项目1< / th>< th>页脚项目2< / th>< / tr> 
< / tfoot> 
< tbody style =overflow-y：scroll; overflow-x：hidden; height：100px;> 
< tr>< td>项目1-1< / td>< td>项目2-1< / td>< / tr> 
 ... 
< tr>< td>项目1-N< / td>< td>项目2-N< / td& 
< / tbody> 
< / table> 
  

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

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

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

Thanks!

解决方案

If you're looking for light code, skip the jQuery altogether and use pure 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.

这篇关于可滚动表使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！