Html 将滚动条添加到表格正文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17450861/
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
add scroll bar to table body
提问by Hello-World
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.
在我很长的表格中，我想向<tbody>标签添加一个滚动条，以便头部始终可见，但它不起作用。你能帮忙吗？
fiddle : http://jsfiddle.net/Hpx4L/
小提琴：http: //jsfiddle.net/Hpx4L/
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>0</td>
</tr>
</tfoot>
<tbody style="overflow-y:scroll; height:100px;"> <!-- wont work -->
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</tbody>
</table>
回答by braican
you can wrap the content of the <tbody>in a scrollable <div>:
您可以将 的内容包装<tbody>在可滚动中<div>：
html
html
....
<tbody>
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
...
css
css
.scrollit {
overflow:scroll;
height:100px;
}
see my jsfiddle, forked from yours: http://jsfiddle.net/VTNax/2/
看我的 jsfiddle，从你的分叉出来：http: //jsfiddle.net/VTNax/2/
回答by Noah Heldman
These solutions often have issues with the header columns aligning with the body columns, and may not work properly when resizing. I know you didn't want to use an additional library, but if you happen to be using jQuery, this one is really small. It supports fixed header, footer, column spanning (colspan), horizontal scrolling, resizing, and an optional number of rows to display before scrolling starts.
这些解决方案通常会出现标题列与正文列对齐的问题，并且在调整大小时可能无法正常工作。我知道您不想使用额外的库，但如果您碰巧使用 jQuery，那么这个库真的很小。它支持固定的页眉、页脚、列跨度 (colspan)、水平滚动、调整大小以及在滚动开始之前显示的可选行数。
jQuery.scrollTableBody (GitHub)
jQuery.scrollTableBody (GitHub)
As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:
只要您有一个带有适当<thead>, <tbody>, 和 (optional) 的表<tfoot>，您需要做的就是：
$('table').scrollTableBody();
回答by Veer Shrivastav
This is because you are adding your <tbody>tag before <td>in table you cannot print any data without <td>.
这是因为您<tbody>之前<td>在表中添加了标签，没有<td>.
So for that you have to make a <div>say #headerwith position: fixed;
所以，你必须做出<div>的发言权#header与position: fixed;
header
{
position: fixed;
}
make another <div>which will act as <tbody>
制作另一个<div>将作为<tbody>
tbody
{
overflow:scroll;
}
Now your header is fixed and the body will scroll. And the header will remain there.
现在您的标题已固定，正文将滚动。标题将保留在那里。
回答by JerryGoyal
If you don't want to wrap a table under any div:
如果您不想在任何div下包装表格：
table{
table-layout: fixed;
}
tbody{
display: block;
overflow: auto;
}
