jquery - 可滚动表格Tbody

我有一个动态生成的数据表。由于空间限制，我需要能够使 tbody 可滚动。

我的 table 看起来像这样:

<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 可滚动:

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          */
}

Demo | Demo with Class Name

注意: 如果你希望你可以像上面的例子中提到的那样定位 tbody 或者更好的方法是为它分配一个可滚动的类并执行以下操作:

tbody.scrollable {
    height: 75px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    width: 100px;       /* Just for the demo          */
}

基本思想: 基本思想取自哈希姆在 this thread 中的回答。

更新: tbody:nth-child(2) 不起作用，因为该选择器将样式应用于第二个也是 tbody 的子元素。在我们的例子中，它工作但没有任何效果，因为表中的第二个 child 是第一个 tbody (在 thead 之后)并且它的内容较少，这使得滚动条变得不必要。当我们进入 nth-child(3) 时，它​​起作用了，因为第二个 tbody 实际上是第三个子元素，并且有足够的内容超过设置的高度，从而触发了滚动条。

看看这个 sample 以供引用。我们可以看到样式没有应用于第二个 div 中的第一个元素和第一个 div 中的第二个元素，因为它们都不是 p 标签(即使两个 div 的 CSS 规则相同)。

关于jquery - 可滚动表格Tbody，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24699594/