table中的tbody高度超出部分，显示滚动条并固定表头

要实现当tbody的高度超出时显示滚动条并固定表头，可以使用CSS来控制表格的样式，并通过JavaScript来动态调整。以下是实现这个功能的示例代码：

HTML:

<table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody id="myTbody">
    <!-- 表格数据 -->
  </tbody>
</table>

CSS:

#myTable {
  display: block;
  overflow-y: auto;
  height: 200px; /* 根据需要设置表格的高度 */
}
 
#myTbody {
  display: block;
  height: auto; /* 根据内容动态调整 */
  overflow-y: auto;
  overflow-x: hidden;
}
 
/* 固定表头样式 */
thead tr {
  position: sticky;
  top: 0;
  background-color: #f9f9f9;
  z-index: 10;
}

JavaScript (动态调整tbody的高度):

window.onload = function() {
  var table = document.getElementById('myTable');
  var tbody = document.getElementById('myTbody');
 
  // 计算表格的总高度减去表头高度
  var tableHeight = table.offsetHeight;
  var theadHeight = table.getElementsByTagName('thead')[0].offsetHeight;
  var newTbodyHeight = tableHeight - theadHeight;
 
  // 设置tbody的高度
  tbody.style.height = newTbodyHeight + 'px';
};

这段代码会在页面加载完成后计算table的总高度并减去thead的高度，然后将结果设置为tbody的高度，使得tbody超出部分可以滚动。同时，表头被设置为position: sticky以固定在顶部。