html +css 实现一个表头固定表体自动循环无缝滚动的表格，鼠标悬浮时停止

实现表头固定和表体自动循环无缝滚动可以使用 CSS 的 position 属性和 JavaScript 的 setInterval 方法。具体步骤如下：

1. HTML 结构：创建一个包含表格的容器，其中包括表头和表体两个部分。

<div class="table-container">
  <table>
    <thead>
      <!-- 表头内容 -->
    </thead>
    <tbody>
      <!-- 表体内容 -->
    </tbody>
  </table>
</div>

2. CSS 样式：为表格容器设置宽度和高度，并将表头设置为固定定位，同时将表体设置为相对定位。

.table-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

thead {
  position: fixed;
  top: 0;
}
tbody {
  position: relative;
}

3. JavaScript 代码：使用 setInterval 方法控制表体的滚动，同时通过设置鼠标悬停事件来停止滚动。

const tableContainer = document.querySelector('.table-container');
const tableBody = document.querySelector('tbody');

let isHovered = false;

tableContainer.addEventListener('mouseover', function() {
  isHovered = true;
});
tableContainer.addEventListener('mouseout', function() {
  isHovered = false;
});

setInterval(function() {
  if (!isHovered) {
    const firstRow = tableBody.rows[0];
    const rowHeight = firstRow.offsetHeight;
    tableBody.style.top = '-' + rowHeight + 'px';
    tableBody.appendChild(firstRow);
    tableBody.style.transition = 'none';
    setTimeout(function() {
      tableBody.style.transition = '';
      tableBody.style.top = '0px';
    }, 0);
  }
}, 2000);

在上述代码中，我们首先获取表格容器和表体元素，并设置一个变量来记录鼠标是否悬停在容器上。然后，使用 setInterval 方法每隔一段时间（这里是 2 秒）执行一次滚动逻辑。在滚动逻辑中，我们首先获取表体中的第一行，并获取该行的高度，然后将表体的 top 属性设置为负的行高，将第一行移动到表体的末尾，最后在下一次滚动时将表体的 top 属性设置为 0，实现无缝滚动效果。在滚动逻辑中，我们还判断鼠标是否悬停在容器上，如果是则不执行滚动逻辑。