向表体添加滚动条 [英] add scroll bar to table body
本文介绍了向表体添加滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的很长的表中，我想添加一个滚动条到< tbody> 标记，以便头部始终可见，但它不工作。请您帮忙。
小提琴： http://jsfiddle.net/Hpx4L/
< table border =1>
< thead>
< tr>
< th> Month< / th>
< th>储蓄< / th>
< / tr>
< / thead>
< tfoot>
< tr>
< td> Sum< / td>
< td> $ 180< / td>
< / tr>
< / tfoot>
< tbody style =overflow-y：scroll; height：100px;> <！ - wont work - >
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< / tbody>
< / table>
解决方案
可滚动< div> 中的
html
....
< tbody>
< tr>
< td colspan =2>
< div class =scrollit>
< table>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
< tr>
< td>一月< / td>
< td> $ 100< / td>
< / tr>
< tr>
< td>二月< / td>
< td> $ 80< / td>
< / tr>
...
css
.scrollit {
overflow：scroll;
height：100px;
}
查看我的jsfiddle，从yours分支：http://jsfiddle.net/VTNax/2/
I want to do this as easily as possible with out any additional libraries.
In my very long table I want to add a scrollbar to the <tbody> tag so that the head is always visible but it wont work. can you please help.
fiddle : 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>
解决方案
you can wrap the content of the <tbody> in a scrollable <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;
}
see my jsfiddle, forked from yours: http://jsfiddle.net/VTNax/2/
这篇关于向表体添加滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
