下面是我的代码
<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>
我正在尝试为 Div 设置垂直滚动条
,因此如果它超过最大高度,我将获得工作正常的滚动条。
现在我尝试修复要修复的标题
我尝试了 position:Fixed for TH
并且它所做的是它使标题在整个页面中保持固定。我在 Fixed header 上看到了很少的帖子,并且对实现这些的最佳方法感到困惑,因为它们中的大多数都是旧答案。
我的输出应该像 Div(Table) 应该是可滚动的,并且仅针对该表格而不是整个页面的标题为 Fixed。
希望有一个简单且更好的方法来实现这一目标
谢谢
最佳答案
您可以尝试将标题与内容分开: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>
关于html - 修复了可滚动 Div 内表格中的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17320837/