有没有办法让html表格单元格中的文本自动滚动,就像股票或新闻滚动条一样?我看到过一些使用CSS实现旧版弃用的marquee标记效果的示例,但似乎两种方法都无法在表格内运行。我知道CSS解决单元格溢出的方案,允许用户使用滚动条浏览文本,但我想知道是否可以在不需要用户输入的情况下自动执行。
有没有办法让html表格单元格中的文本自动滚动,就像股票或新闻滚动条一样?我看到过一些使用CSS实现旧版弃用的marquee标记效果的示例,但似乎两种方法都无法在表格内运行。我知道CSS解决单元格溢出的方案,允许用户使用滚动条浏览文本,但我想知道是否可以在不需要用户输入的情况下自动执行。
.tech-slideshow {
height: 200px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow>td {
height: 200px;
width: 256px;
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 5s linear infinite;
}
@keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
<table>
<tr class="tech-slideshow">
<td class="mover-1">
scrolling text scrolling text
</td>
</tr>
</table>
table.scrollable-content tbody tr{
overflow:auto;
display:block;
height:30px;
}
table.scrollable-content tbody tr div{
animation-name: example;
animation-duration: 5s;
}
table.scrollable-content tbody tr:hover div{
animation-name: example2;
animation-duration: 5s;
}
@keyframes example {
from {background-color: rgba(250,0,0,0.5);}
to {
background-color: rgba(250,250,0,0.5);
transform:translateY(-30px)
}
}
@keyframes hovered {
from {background-color: rgba(250,0,0,0.5);}
to {
background-color: rgba(250,250,0,0.5);
transform:translateY(-30px)
}
}
<table class="scrollable-content">
<thead><tr><th>header</th></tr></thead>
<tbody>
<tr>
<td>
<div>
Body with very long text,Body with very long text,<br/>Body with very long text,Body with very long text,Body with very long text,Body with very long text,Body with very long text,Body with very long text,Body with very long text
</div>
</td>
</tr>
</tbody>
</table>