Bootstrap 通过HTML和CSS使表格自动垂直滚动

9bfwbjaz 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(219)

我有一个简单的引导表，我试图让它自动垂直滚动。这样做的原因是，表将显示在屏幕上，表中可能有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就可以实现这一点。
有什么建议吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/36873753/make-table-auto-scroll-vertically-via-html-css

3条答案

按热度按时间

mnemlml81#

需要JS（或jQuery）来获取实际的元素height和scrollHeight，并对这些值执行动画
第一个

赞(0）回复(0）举报 2022-12-07

iqih9akk2#

我强烈推荐使用javascript。我只尝试过一次使用CSS，然后马上放弃了这个想法，但理论上是可行的。下面的演示没有在所有浏览器上测试，有巨大的兼容性问题，是Safari上有史以来最糟糕的东西。故事的寓意：请使用JavaScript。
第一个

赞(0）回复(0）举报 2022-12-07

oewdyzsn3#

下面的代码将不会重置并从表的顶部开始返回（如问题中所问），但这将有助于未来的读者使用固定标题自动滚动和循环表行。

<!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    	<script type="text/javascript">
    	$.fn.infiniteScrollUp=function(){
    		var self=this,kids=self.children()
    		kids.slice(20).hide()
    		setInterval(function(){
    			kids.filter(':hidden').eq(0).fadeIn()
    			kids.eq(0).fadeOut(function(){
    				$(this).appendTo(self)
    				kids=self.children()
    			})
    		},1000)
    		return this
    	}
    	$(function(){
    		$('tbody').infiniteScrollUp()
    	})
    	</script>
    	<title>infiniteScrollUp</title>
    </head>
    <body>
    <table>
    <colgroup><col /><col /><col /><col /><col /><col /></colgroup>
    <thead>
    <tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
    </thead>
    <tbody>
    <tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    </tbody>
    </table>
    </body>
    </html>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 通过HTML和CSS使表格自动垂直滚动

3条答案

相关问题

热门标签

最新问答