table tbody超出高度滚动条

要让 table 的 tbody 超出高度时出现滚动条，可以将 tbody 放在一个固定高度的 div 容器中，然后设置该容器的 overflow 属性为 auto 或 scroll。具体操作如下：

1. 在 table 中添加一个 tbody 元素，并将 tbody 的样式设置为 display: block。

2. 将 tbody 放在一个固定高度的 div 容器中，并设置该容器的 overflow 属性为 auto 或 scroll。

示例代码如下：

<div style="height: 300px; overflow: auto;">
  <table>
    <thead>
      <!-- 这里是表头 -->
    </thead>
    <tbody style="display: block;">
      <!-- 这里是表格内容 -->
    </tbody>
  </table>
</div>

这样，当 tbody 内容超出容器高度时，就会出现滚动条，用户可以通过拖动滚动条来查看隐藏的内容。注意，thead 和 tbody 的样式需要分别设置，因为它们是不同的元素。

相关问题

table下tbody滚动条与thead对齐的方法且每一列可以不均等

要实现table下的tbody滚动条与thead对齐的效果，可以使用以下方法：

1. 将thead与tbody分开放到两个div中，一个div用于显示thead，另一个div用于显示tbody，这两个div都设置为相同的宽度。

2. 对于tbody所在的div，设置overflow属性为auto，这样当tbody内容超出div的高度时，会自动生成滚动条。

3. 针对每一列，可以通过设置不同的宽度来实现不均等。

具体实现代码如下：

HTML代码：

<div class="table-container">
  <div class="thead-container">
    <table>
      <thead>
        <tr>
          <th style="width: 100px;">列1</th>
          <th style="width: 200px;">列2</th>
          <th style="width: 150px;">列3</th>
          <th style="width: 50px;">列4</th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="tbody-container">
    <table>
      <tbody>
        <tr>
          <td style="width: 100px;">内容1</td>
          <td style="width: 200px;">内容2</td>
          <td style="width: 150px;">内容3</td>
          <td style="width: 50px;">内容4</td>
        </tr>
        <tr>
          <td style="width: 100px;">内容1</td>
          <td style="width: 200px;">内容2</td>
          <td style="width: 150px;">内容3</td>
          <td style="width: 50px;">内容4</td>
        </tr>
        <!-- more rows -->
      </tbody>
    </table>
  </div>
</div>

CSS代码：

.table-container {
  display: flex;
  flex-direction: column;
  height: 300px; /* 设置表格高度 */
}

.thead-container {
  overflow: hidden;
  height: 30px; /* 设置表头高度 */
}

.thead-container table {
  width: 100%; /* 与tbody-container同宽 */
  border-collapse: collapse;
}

.tbody-container {
  flex: 1;
  overflow: auto; /* 当tbody内容超出div高度时，显示滚动条 */
}

.tbody-container table {
  width: 100%; /* 与thead-container同宽 */
  border-collapse: collapse;
}

.tbody-container td,
.tbody-container th {
  white-space: nowrap; /* 防止文字换行 */
}

通过以上代码，就可以实现thead与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 ]