tbody加滚动条不生效

如果你想让 tbody 元素出现滚动条，需要在它的父元素上设置固定的高度，并将 overflow 属性设置为 auto 或 scroll。例如：

<div style="height: 200px; overflow: auto;">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody style="height: 100%;">
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

请注意，你需要在 tbody 元素上设置高度为 100%，以确保它填充其父元素的高度。如果不设置高度，tbody 可能会根据其内容自动调整大小，从而使滚动条无效。

相关问题

tbody加滚动条

如果你想让一个 `<tbody>` 元素拥有滚动条，可以将其包裹在一个 `<div>` 元素中，并为该 `<div>` 元素添加样式 `overflow: auto`。

例如：

<div style="overflow: auto;">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

这将使包含 `<tbody>` 元素的 `<div>` 元素出现滚动条，当 `<tbody>` 中的内容超出其高度时，用户可以使用滚动条来浏览内容。

tbody垂直滚动条

引用\[2\]中提到，为了在table的内容上显示垂直滚动条，可以使用以下方法之一。其中一种方法是设置tbody元素的高度和overflow属性。通过将tbody的高度设置为固定值，并将overflow属性设置为auto，可以使得当内容超出tbody的高度时，自动显示垂直滚动条。这样即使数据很多，也可以保持页面的整洁和用户体验的良好。
#### 引用[.reference_title]
- *1* [用css 给tbody加垂直滚动条](https://blog.csdn.net/u012844719/article/details/18989303)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [纯css实现table的表头固定tbody内容显示垂直滚动条](https://blog.csdn.net/weixin_35937871/article/details/117805188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]