table超出高度滚动条

要让一个 table 超出高度时出现滚动条，可以使用 CSS 的 overflow 属性。具体操作如下：

1. 在 table 的外层容器中设置一个固定高度，比如 300px。

2. 给该容器设置 overflow 属性为 auto 或 scroll。

3. 如果希望出现纵向滚动条，还需要设置 table 的 display 属性为 block。

示例代码如下：

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

这样，当 table 内容超出容器高度时，就会出现滚动条，用户可以通过拖动滚动条来查看隐藏的内容。

相关问题

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 的样式需要分别设置，因为它们是不同的元素。

el-table高度自适应，超出显示表格滚动条，

为了实现el-table的高度自适应并且超出部分显示表格滚动条，需要对el-table标签进行以下设置：

1. 设置el-table的height属性为'100%'，让其高度自适应父容器的高度。

2. 设置el-table的max-height属性为需要显示的最大高度，超出该高度的部分将会出现滚动条。

3. 设置el-table-column的min-width属性，避免表格内容太宽导致表格出现水平滚动条。

以下是一个示例代码，可以参考一下：

<template>
  <div class="table-container">
    <el-table :data="tableData" height="100%" max-height="400">
      <el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" min-width="80"></el-table-column>
      <el-table-column prop="address" label="地址" min-width="200"></el-table-column>
    </el-table>
  </div>
</template>

<style>
.table-container {
  height: 400px;
  overflow: auto;
}
</style>

在上面的代码中，我们将el-table包裹在一个高度为400px的容器中，并设置容器的overflow属性为auto，这样当el-table的内容超出容器高度时，就会出现垂直滚动条。同时，我们也设置了el-table的height属性为'100%'，让其高度自适应父容器的高度，并设置了max-height属性为400，表示当内容超出400px时，就会出现垂直滚动条。最后，我们也设置了el-table-column的min-width属性，避免表格内容太宽导致表格出现水平滚动条。