我有一个包含动态生成数据的表。由于篇幅所限，我需要使tbody可滚动。
我的桌子看起来像这样：
<table>
<thead> <! -- This thead needs to stay in a fixed position-->
<tr>
<th></th>
<th></th>
</tr>
<thead>
<tbody> <! -- This tbody needs to stay in a fixed position-->
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tbody> <! -- This tbody needs to scroll -->
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
我尝试使用CSS，但未成功：
table tbody:nth-child(2) {
height:500px;
max-height:500px;
overflow-y: scroll;
}
我理想的解决方案是简单的CSS。有什么建议么？另外，为什么在躯干上设置高度不起作用？
您可以tbody通过执行以下操作来使滚动成为可能：
tbody {
display: block; /* mandatory because scroll only works on block elements */
}
tbody:nth-child(3) {
height: 75px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
width: 100px; /* Just for the demo */
}
注意：如果希望，可以tbody按照上述示例中的说明定位，或者更好的方法是为其分配一个可滚动的类，并执行以下操作：
tbody.scrollable {
height: 75px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
width: 100px; /* Just for the demo */
}
基本思想：基本思想来自Hashem在此主题中的答案。
更新：在tbody:nth-child(2)没有工作，因为选择样式应用于这也是第二子元素tbody。在我们的例子中，它起作用了，但没有任何效果，因为表中的第二个孩子是第一个tbody（在之后thead），并且其内容较少，因此不需要滚动条。当我们到达时nth-child(3)，它起作用了，因为第二个tbody实际上是第三个子元素，并且具有足够的内容超过了设置的高度，从而触发了滚动条的出现。
看看这个样本以供参考。我们可以看到该样式不适用于第二div个元素中的第一个元素和第一个元素中的第二个元素，div因为它们都不是p标签（即使两个div的CSS规则都相同）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句