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

作者站长头像
站长
· 阅读数 5

如下图所示:滚动时表格中的行在超过表头时还会继续滚动我有一个table表格,用动画实现了一个自动滚动效果,可是表格body总是滚动超过表头才消失?

贴下代码

        <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:按照两位博主的回答重新修改的样式 还是会有一些溢出 不知道什么原因如图 :会有一点点的溢出 我有一个table表格,用动画实现了一个自动滚动效果,可是表格body总是滚动超过表头才消失?

回复
1个回答
avatar
test
2024-06-27
  <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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容