html表格内的自动滚动文本

Posted 2023-03-06

【中文标题】html表格内的自动滚动文本

【英文标题】：Auto scrolling text inside html table

【发布时间】：2018-10-25 12:40:26

【问题描述】：

有没有办法让 html 表格单元格中的文本自动滚动，就像股票或新闻行情一样？我已经看到了一些使用 CSS 来实现类似旧的不推荐使用的选取框标记的效果的示例，但似乎两者都不能在表格中工作。我知道单元格溢出的 CSS 解决方案允许用户使用滚动条来浏览文本，我特别想知道是否可以在没有用户输入的情况下自动执行此操作。

【问题讨论】：

您可以使用 css 动画关键帧来滚动文本，但从未尝试过用于表格

【参考方案1】：

您可以在@karthik 的评论中使用table 来做到这一点，在我看来使用divs 会更容易。

.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>

【参考方案2】：

这是一个小提琴，展示了在表格中使用 div 进行垂直滚动的示例。

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>

请参阅小提琴中的代码 https://jsfiddle.net/2vkp1g7a/