表格主体滚动时，为何超出表头消失？

在表中实现自动滚动时，body总是超过表头消失的原因

当为表格主体（tbody）设置了动画滚动时，tbody会沿着纵轴移动，当tbody完全滚动出表格（table）的范围时，tbody就会从视图中消失。然而，在给出的代码中，没有对表格本身或表头（thead）设置任何限制，导致tbody在滚动出表格范围后仍在继续滚动，超出表头区域。

解决方案

要解决这个问题，可以在表格（table）上设置: hidden;属性，表示隐藏超出表格范围的子元素。此外，可以将表头（thead）设置（position: relative;）并提高其层级（z-index: 1;）以盖住tbody。同时，给表头设置背景色（background-color: #fff;）以覆盖tbody的移动部分。

具体实现的代码如下：

/* 表格滚动动画 */
@keyframes table {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

/* 表格容器 */
.table {
  overflow: hidden;
}

/* 表头 */
.table thead {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

/* 表格主体 */
.table tbody {
  animation: table 10s infinite linear;
}

登录后复制

以上就是表格主体滚动时，为何超出表头消失？的详细内容，更多请关注米云其它相关文章！