如何滚动table的“tbody”独立于“thead”？
如下所述：
表格行可以分别使用THEAD，TFOOT和TBODY元素分组到表格头，表格脚和一个或多个表格主体部分。 这个部门使得用户代理可以独立于桌子的头部和脚部来支持桌子的滚动。
我创build了以下示例 ，但它不起作用。
HTML：
<table> <thead> <tr> <td>Problem</td> <td>Solution</td> </tr> </thead> <tbody> </tbody> </table> JS：
$(function() { for (var i = 0; i < 20; i++) { var a = Math.floor(10 * Math.random()); var b = Math.floor(10 * Math.random()); var row = $("<tr>").append($("<td>").html(a + " + " + b + " =")) .append($("<td>").html(a + b)); $("tbody").append(row); } });
CSS：
table { background-color: #aaa; } tbody { background-color: #ddd; height: 100px; overflow: auto; } td { padding: 3px 10px; }
缺less的部分是：
thead, tbody { display: block; }
演示
我在一个月前看到这个post，当时我遇到了类似的问题。 我需要在UI对话框中的y轴滚动表（是的，你听到我的权利）。 我很幸运，因为一个可行的解决scheme相当迅速。 然而，这个解决scheme在不久的将来才会有生命，
设置顶级元素（thead，tfoot和tbody）为显示块的问题在于各种组件之间的列大小的浏览器同步很快就会丢失，并且所有东西都被封装到允许的最小大小。 设置列的宽度看起来是最好的行为方式，但是没有设置所有内部表格组件的宽度来匹配这些列的总数，即使是固定的表格布局，标题和主体之间也有一点差异当滚动条存在时。
我的解决scheme是设置所有的宽度，检查是否存在滚动条，然后采取浏览器实际决定的缩放宽度，并复制到页眉和页脚调整最后一列宽度大小的滚动条。 这样做为柱宽提供了一些stream动性。 如果对表格宽度进行更改，则大多数主stream浏览器都会相应地自动缩放tbody列的宽度。 剩下的就是从各自的tbody大小设置页眉和页脚列的宽度。
$table.find("> thead,> tfoot").find("> tr:first-child") .each(function(i,e) { $(e).children().each(function(i,e) { if (i != column_scaled_widths.length - 1) { $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width())); } else { $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth()); } }); });
这个小提琴演示这些概念： http : //jsfiddle.net/borgboyone/gbkbhngq/ 。
请注意，单独的y轴滚动不需要表格包装或附加表格。 （X轴滚动确实需要一个包装表）。如果遇到标题或正文列的最小包大小，则正文和标题的列大小之间的同步仍将丢失。 应该提供一个最小宽度的机制，如果resize是一个选项或预期小的表宽度。
从这个出发点来看，最终的高潮在此完全实现： http : //borgboyone.github.io/jquery-ui-table/
一个。
thead { position: fixed; height: 10px; /* This is whatever height you want */ } tbody { position: fixed; margin-top: 10px; /* This has to match the height of thead */ height: 300px; /* This is whatever height you want */ }
尝试这个。
table { background-color: #aaa; } tbody { background-color: #ddd; height: 100px; overflow-y: scroll; position: absolute; } td { padding: 3px 10px; color: green; width: 100px; }
强制性部分：
tbody { overflow-y: scroll; (could be: 'overflow: scroll' for the two axes) display: block; with: xxx (a number or 100%) } thead { display: inline-block; }
