我在实现一个包含多个tbody元素的固定表头可滚动表格方面遇到了麻烦。
基本上,我想把一个表格放在一个固定大小的容器元素中。然后我想滚动任何溢出的表格元素,而不移动表头。
这个表格需要使用Twitter Bootstrap进行样式设计,但我不确定这与问题有关。
希望这说得清楚!
这里是一个示例(显然还没有完全按预期工作): https://jsfiddle.net/whbbwv7g/
以下是代码:
<div id="tableContainer">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>
唯一的CSS代码如下:
#tableContainer {
width: 300px;
height:150px;
}
<div>
<table class="toptable">
<!--在此处放置表头-->
</table>
<table class="toptable">
<!--在此处放置表头-->
</table>
<table class="bottomtable">
<!--在此处放置表行并将此表格设置为overflow:scroll;-->
</table>
</div>
- Korgrue