table表头固定内容滚动

要实现表头固定内容滚动，可以使用CSS的position属性和overflow属性，以及JavaScript来实现。

1. 首先，在HTML中创建一个包含表格的容器div，并设置其高度和overflow属性为scroll。

2. 在容器div中创建两个table元素，一个用于显示表头，一个用于显示表格内容。可以将表头数据写在第一个table元素中，表格内容写在第二个table元素内。

3. 给第一个table元素设置position:fixed属性，使其固定在容器div的顶部，同时设置z-index属性确保其在表格内容上方显示。

4. 使用JavaScript监听容器div的scroll事件，通过设置第一个table元素的left属性来实现表头和表格内容的同步滚动。

以下是示例代码：

HTML代码：

<div class="table-container">
  <table class="header-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
  </table>
  <table class="content-table">
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
      </tr>
      <!-- more rows here -->
    </tbody>
  </table>
</div>

CSS代码：

.table-container {
  height: 300px;
  overflow: scroll;
}

.header-table {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  /* set width of each th to match width of corresponding td in content table */
}

.content-table {
  /* set width of each td to match corresponding th in header table */
}

JavaScript代码：

const headerTable = document.querySelector('.header-table');
const contentTable = document.querySelector('.content-table');
const container = document.querySelector('.table-container');

container.addEventListener('scroll', () => {
  headerTable.style.left = `-${container.scrollLeft}px`;
});

注意：上述代码只是示例代码，实际应用中需要根据具体情况进行调整和优化。