我有一个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:按照两位博主的回答重新修改的样式 还是会有一些溢出 不知道什么原因如图 :会有一点点的溢出
回复
1个回答
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>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容