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加滚动条

如果你想让一个 `<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>` 中的内容超出其高度时，用户可以使用滚动条来浏览内容。