table表头固定内容滚动

如果想要实现表头固定内容滚动的效果，可以使用CSS中的position属性和JavaScript中的scroll事件来实现。具体的实现步骤如下：

1. 首先，将表格的表头和表格内容分别放入两个div中，并设置它们的class为"fixed-header"和"scrollable-content"。

2. 设置.fixed-header的position为fixed，top为0，left为0，z-index为1，使其固定在屏幕顶部。

3. 设置.scrollable-content的overflow为auto，并且设置高度和宽度。同时，设置一个padding-top值，使得滚动条不会遮挡住表格的第一行。

4. 在JavaScript中，监听.scrollable-content的scroll事件，并且在事件触发时，将.fixed-header的left值设置为负的.scrollable-content的scrollLeft值，使表头随着内容滚动而滚动。

下面是一个示例代码：

HTML代码：

<div class="fixed-header">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
  </table>
</div>
<div class="scrollable-content">
  <table>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      ...
    </tbody>
  </table>
</div>

CSS代码：

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.scrollable-content {
  overflow: auto;
  height: 200px;
  width: 100%;
  padding-top: 50px; /*表头高度*/
}

JavaScript代码：

$('.scrollable-content').on('scroll', function(){
  $('.fixed-header').css({
    'left': -$(this).scrollLeft()
  });
});

上面的代码中，使用jQuery的on方法监听.scrollable-content的scroll事件，并且在事件触发时，将.fixed-header的left值设置为负的.scrollable-content的scrollLeft值。

需要注意的是，如果表格的表头和内容列数不一致，可能会导致表头和内容位置错乱的问题。如果出现这种情况，可以将表格的表头和内容分别放到两个table中，并设置它们的宽度和列数相同。