将滚动条添加到表格主体
我想尽可能简单地做到这一点，没有任何额外的库。
在我很长的表格中，我想添加一个滚动条到<tbody>标签，使得头部总是可见的，但它不会工作。 你能帮忙吗？
小提琴： http : //jsfiddle.net/Hpx4L/
<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody style="overflow-y:scroll; height:100px;"> <!-- wont work --> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>
你可以把<tbody>的内容包装在一个可滚动的<div> ：
HTML
.... <tbody> <tr> <td colspan="2"> <div class="scrollit"> <table> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> ...
CSS
.scrollit { overflow:scroll; height:100px; }
看到我的jsfiddle，从你的分叉： http : //jsfiddle.net/VTNax/2/
这些解决scheme通常与标题列与主体列alignment，并且在resize时可能无法正常工作。 我知道你不想使用额外的库，但如果你碰巧使用jQuery，这个是非常小的。 它支持固定的页眉，页脚，列跨越（colspan），水平滚动，resize，以及在滚动开始之前显示的可选行数。
jQuery.scrollTableBody（GitHub）
只要你有一个适当的<thead> ， <tbody>和（可选的） <tfoot> ，你需要做的就是：
$('table').scrollTableBody();
这是因为你要在表中添加你的<tbody>标签，所以你不能在没有<td>情况下打印任何数据。
因此，你必须做一个<div>说#header与position: fixed;
header { position: fixed; }
使另一个<div>将作为<tbody>
tbody { overflow:scroll; }
现在你的标题是固定的，主体将滚动。 头部将保持在那里。
