html +css 实现一个自动滚动的表格，鼠标悬浮时停止，并且包含详情点击按钮

可以使用CSS的`@keyframes`属性实现自动滚动表格，鼠标悬浮时停止，以及使用JavaScript实现点击按钮展开详情。下面是一个简单的示例代码：

HTML代码：

<table class="scroll-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>详情</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td><button class="detail-btn">查看详情</button></td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
      <td><button class="detail-btn">查看详情</button></td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
      <td><button class="detail-btn">查看详情</button></td>
    </tr>
  </tbody>
</table>

CSS代码：

.scroll-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.scroll-table th,
.scroll-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.scroll-table th:last-child,
.scroll-table td:last-child {
  width: 100px;
}

.scroll-table button {
  background-color: #ccc;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

/* 实现自动滚动 */
.scroll-table tbody {
  animation: scroll 5s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

/* 鼠标悬停时停止自动滚动 */
.scroll-table tbody:hover {
  animation-play-state: paused;
}

JavaScript代码：

// 获取所有详情按钮
const detailBtns = document.querySelectorAll(".detail-btn");

// 循环绑定点击事件
detailBtns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    // 获取当前按钮所在的行
    const tr = e.target.parentNode.parentNode;
    
    // 切换详情显示状态
    tr.classList.toggle("show-detail");
  });
});

CSS代码中的`@keyframes`实现了自动滚动，`tbody`标签上设置了`animation`属性，让表格内容在5秒钟内从上往下滚动，滚动完成后立即回到初始状态，然后重复这个过程。

鼠标悬停时，通过设置`animation-play-state`属性为`paused`来暂停自动滚动。

JavaScript代码中，获取所有的详情按钮并循环绑定点击事件，点击时通过切换行的`show-detail`样式类来显示或隐藏该行的详情内容。需要在CSS中为`show-detail`样式类设置详情内容的样式。