Автоматическая прокрутка текста внутри HTML-таблицы - PullRequest
Новая
       29

Автоматическая прокрутка текста внутри HTML-таблицы

0 голосов
/ 15 мая 2018

Есть ли способ, чтобы текст в ячейке таблицы в html автоматически прокручивался, как на бирже или в новостях? Я видел несколько примеров использования CSS для достижения эффекта, подобного старому устаревшему тегу marquee, но, похоже, ни тот, ни другой не будут работать внутри таблицы. Мне известно о CSS-решении для переполнения ячеек, которое позволяет пользователям использовать полосу прокрутки для просмотра текста. Мне было интересно, можно ли сделать это автоматически без какого-либо участия пользователя.

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Вот скрипка, показывающая пример использования 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/
0 голосов
/ 15 мая 2018

Вы можете сделать это с помощью комментария @ 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>
...