原生html table固定高度并显示滚动条

要在HTML表格中固定高度并显示滚动条，您可以使用CSS来设置表格的高度以及父容器的高度和overflow属性。以下是一个简单的示例：

HTML:

<div class="table-container">
  <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>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

CSS:

.table-container {
  height: 200px; /* 设置固定高度 */
  overflow-y: auto; /* 显示垂直滚动条 */
}
 
table {
  width: 100%; /* 表格宽度 */
  border-collapse: collapse; /* 可选的表格样式 */
}
 
th, td {
  border: 1px solid #ddd; /* 可选的表格样式 */
  padding: 8px; /* 可选的表格样式 */
  text-align: left; /* 可选的表格样式 */
}

在这个例子中，.table-container 类的高度被设置为200px，如果表格的内容超出这个高度，则会显示垂直滚动条。您可以根据需要调整 .table-container 的高度。