如何使html表垂直滚动

Question

见jsbin

我必须使我的html表垂直滚动.
我在tbody标签上使用了以下代码,但它对我不起作用

 <tbody style="height: 100px; overflow: auto">

Answer 1

你为什么不把你的桌子放在一个div？

<div style="height:100px;overflow:auto;">

 ... Your code goes here ...

</div>

Answer 2

只需将display:block添加到thead> tr和tbody即可.检查以下示例

http://www.imaputz.com/cssStuff/bigFourVersion.html

Answer 3

尝试这个......它正在工作......这里是JSBIN

table tbody { height:300px; overflow-y:scroll; display:block; }
table thead { display:block; }

Answer 4

最好的方法是严格将表分为两个不同的表-标头和正文：

<div class="header">
  <table><tr><!-- th here --></tr></table>
</div>

<div class="body">
  <table><tr><!-- td here --></tr></table>
</div>

.body {
  height: 100px;
  overflow: auto
}

如果表的宽度较大（大于屏幕宽度），则必须同步添加水平滚动标题和正文的滚动事件。

您永远不要触摸带有CSS属性display和overflow的表标签（table，tbody，thead，tfoot，tr）。与DIV包装器打交道更为可取。