我有一个简单的引导表,我试图有垂直滚动自动。这样做的原因是,该表将显示在屏幕上,该表可以有10个项目或100个。因此,我想它自动滚动垂直,使用户不必这样做手动。在它到达终点后,它只会重置,从顶部重新开始...
这是我到目前为止的标记:
<div class="table-responsive" style="height: 700px; overflow: auto;">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
字符串
注意:我希望这可以只用HTML
和CSS
来实现。
有什么建议吗
3条答案
按热度按时间hiz5n14c1#
JS(或jQuery)需要获取实际的元素
height
和scrollHeight
并对这些值执行动画xqnpmsa82#
我强烈推荐使用JavaScript。我只使用CSS尝试过一次,然后迅速放弃了这个想法,但理论上是可能的。下面的演示没有在所有浏览器上测试,有很大的兼容性问题,是Safari上有史以来最jankiest的东西。这个故事的寓意:使用JavaScript。
个字符
svdrlsy43#
下面的代码不会像问题中所问的那样重置并从表的顶部开始,但这将有助于一些未来的读者尝试使用固定标题自动滚动和循环表行。
字符串