我的代码如下
<div>Some Page Content </div>
<div style="max-height: 200px; overflow: auto;">
<table id="test">
<thead>
<tr>
<th>
</th>
</th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<div>Some Page Content </div>
我正在尝试拥有vertical scroll bar
对于 Div,所以如果它超过最大高度,我会得到工作正常的滚动条。
现在我尝试修复要修复的标题
我试过position:Fixed for TH
它的作用是使整个页面的标题保持固定。我在固定标题上看到了一些关于相同内容的帖子,并且对实现这些内容的最佳方法感到困惑,因为其中大多数都是旧答案。
我的输出应该像 Div(Table) 应该是可滚动的,并且标题仅针对该表而不是整个页面固定。
希望有一种简单且更好的方法来实现这一目标
Thanks
您可以尝试将标题与内容分开:http://jsfiddle.net/u2xZU/ http://jsfiddle.net/u2xZU/并将标题放在可滚动内容之外。
基本上,使用两张表,一张用于标题,一张用于内容:
<div>Some Page Content </div>
<table>
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
</tr>
</thead>
</table>
<div style="max-height: 200px; overflow: auto;">
<table id="test">
<tbody>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
<tr> <td>content</td> <td>content</td> <td>content</td> </tr>
</tbody>
</table>
</div>
<div>Some Page Content </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)