我有一个table表格，用动画实现了一个自动滚动效果，可是表格body总是滚动超过表头才消失？

Question

如下图所示：滚动时表格中的行在超过表头时还会继续滚动

贴下代码

        <table class="table" border="0" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>钢平</th>
                                    <th>规格</th>
                                    <th>区域</th>
                                    <th>库位号</th>
                                </tr>
                            </thead>
                            <tbody style="overflow: hidden;height: 90%;">
                                <tr>
                                    <td>1</td>
                                    <td>1000</td>
                                    <td>22</td>
                                    <td>A</td>
                                    <td>121</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>1000</td>
                                    <td>22</td>
                                    <td>B</td>
                                    <td>163</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>1800</td>
                                    <td>10</td>
                                    <td>C</td>
                                    <td>188</td>
                                </tr>
                            </tbody>

                        </table>

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


.table tbody{
  animation: table 10s infinite linear;
}

这是为什么呢？

PS：按照两位博主的回答重新修改的样式 还是会有一些溢出 不知道什么原因
如图 ：会有一点点的溢出

Answer 1

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

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

    .table {
      /* overflow: hidden;是隐藏超过自身范围的子元素，你给tbody开这个没用，因为
       tbody是自身整体在移动，开到table上，当tbody滚动出table的范围之后就会隐藏了*/
      overflow: hidden;
    }

    .table thead {
      /* 给thead开个相对定位，然后把层级提高一下，盖住tbody，这样在z轴上，
       tbody就到thead的下面了，再给thead一个背景色，就可以盖住tbody了*/
      position: relative;
      z-index: 1;
      background-color: #fff;
    }

    .table tbody {
      animation: table 10s infinite linear;
    }
  </style>

Answer 2

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

.table {
    overflow: hidden;
}

.table tbody{
    position: relative;
    z-index: 1;
    animation: table 10s infinite linear;
}
.table thead {
    position: relative;
    z-index: 2;
    background: #fff;
}

把表头的背景色改成和底下的背景一样的颜色

Answer 3

关于给table设置overflow: hidden; tbody元素仍会溢出表格头部的问题 解决方案如下：添加一个遮罩层 设置遮罩层的样式为表头样式 取消设置表头样式 这样遮罩层就会把溢出的部分给遮盖了

                <!--遮罩层-->
                    <div class="mask-layer"></div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>钢平</th>
                                <th>规格</th>
                                <th>区域</th>
                                <th>库位号</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>1000</td>
                                <td>22</td>
                                <td>A</td>
                                <td>121</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>1000</td>
                                <td>22</td>
                                <td>B</td>
                                <td>163</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>1800</td>
                                <td>10</td>
                                <td>C</td>
                                <td>188</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>1000</td>
                                <td>22</td>
                                <td>D</td>
                                <td>121</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>1020</td>
                                <td>18</td>
                                <td>G</td>
                                <td>163</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>800</td>
                                <td>10</td>
                                <td>H</td>
                                <td>188</td>
                            </tr>
                        </tbody>
                    </table>

/*遮罩层样式*/
.mask-layer {
  width: 100%;
  height: .42rem;
  background-color: #011337;
  position: absolute;
  z-index: 1;

}