滑动时，固定表头，并在右侧显示滚动条

要实现固定表头并在右侧显示滚动条，可以使用CSS的`position: fixed`属性来固定表头，然后使用`overflow-y: scroll`属性使表格在垂直方向上出现滚动条。具体步骤如下：

1.将表格包装在一个容器中，并设置容器的高度以限制表格的高度和滚动条的出现。

2.为表格的头部创建一个新的元素，并将表格头部的内容复制到该元素中。

3.将该元素的`position`属性设置为`fixed`以使其固定在页面中。

4.将该元素的`top`属性设置为0，以使其固定在页面顶部。

5.将表格的`margin-top`属性设置为表格头部元素的高度，以确保表格正文不会被表格头部元素覆盖。

6.将容器的`overflow-y`属性设置为`scroll`以使表格在垂直方向上出现滚动条。

下面是一个示例代码，可以参考一下：

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>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
      </tr>
      <!-- more rows... -->
    </tbody>
  </table>
</div>

CSS代码：

.table-container {
  height: 300px; /* 设置容器高度 */
  overflow-y: scroll; /* 使表格在垂直方向上出现滚动条 */
}

/* 创建固定的表格头部元素 */
.table-header {
  position: fixed;
  top: 0;
  background-color: #f9f9f9;
  z-index: 1; /* 将表格头部元素置于页面顶部 */
}

/* 复制表格头部内容到新的表格头部元素中 */
.table-header th {
  width: 100px; /* 设置表格头部元素中每列的宽度 */
}

/* 确保表格正文不会被表格头部元素覆盖 */
table {
  margin-top: 50px; /* 设置表格正文的 margin-top 值 */
}

通过以上代码，可以实现表格头部固定在页面顶部并在右侧显示滚动条的效果。