html表格表头固定不动

要实现HTML表格表头固定不动，可以使用CSS和JavaScript来实现。

首先，在HTML中创建一个表格，可以使用`<table>`标签来创建。在表格里面，使用`<thead>`标签来定义表头部分，使用`<tbody>`标签来定义表格内容部分。

然后，使用CSS来设置表头的样式。给`<thead>`标签设置一个固定的高度和`overflow: scroll`样式，使表头部分具有滚动条。这样，即使表格内容滚动，表头也会保持固定不动。

接下来，使用JavaScript来实现表格内容的滚动。给`<tbody>`标签设置一个固定的高度和`overflow: auto`样式，以便在内容溢出时显示滚动条。使用JavaScript来监听`<tbody>`标签的`scroll`事件，并将其滚动的距离应用到`<thead>`标签上，以使表头部分和表格内容保持同步滚动。

具体实现代码如下所示：

HTML代码：

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <!-- 其他行... -->
  </tbody>
</table>

CSS代码：

thead {
  display: block;
  height: 50px;
  overflow: scroll;
}

tbody {
  display: block;
  height: 200px;
  overflow: auto;
}

JavaScript代码：

var tbody = document.querySelector('tbody');
var thead = document.querySelector('thead');

tbody.addEventListener('scroll', function() {
  thead.style.transform = 'translateY(' + this.scrollTop + 'px)';
});

这样，就实现了HTML表格表头固定不动的效果。