通过HTML& amp;使表格自动垂直滚动的CSS [英] Make table auto scroll vertically via HTML & CSS

问题描述

我有一个简单的引导表，我试图使它自动垂直滚动.这样做的原因是该表将显示在屏幕上，并且该表中可能有10个项目或100个项目.因此，我希望它可以垂直垂直滚动，因此用户不必手动进行操作.到达终点后，它将重新设置并从顶部开始...

I have a simple bootstrap table that I am trying to have vertically scroll automatically. The reason for this, is that the table will be displayed on a screen and the table could have 10 items in it or 100. So I would like it to auto scroll vertically so the user does not have to do it manually. After it reaches the end, it will just reset and start back from the top...

到目前为止，这是我的标记:

This is my markup thus far:

<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 即可解决此问题.

NOTE: I am hoping this can be achevied with only HTML and CSS.

有什么建议吗?

推荐答案

JS (或jQuery)来获取实际元素 height 和 scrollHeight 并根据这些值执行动画

JS (or jQuery) is needed to get the actual element height and scrollHeight and perform the animation on those values

var $el = $(".table-responsive");
function anim() {
  var st = $el.scrollTop();
  var sb = $el.prop("scrollHeight")-$el.innerHeight();
  $el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
  $el.stop();
}
anim();
$el.hover(stop, anim);

.table-responsive{
  height:180px; width:50%;
  overflow-y: auto;
  border:2px solid #444;
}.table-responsive:hover{border-color:red;}

table{width:100%;}
td{padding:24px; background:#eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <thead>
      <tr><th>#</th></tr>
    </thead>
    <tbody>  
      <tr><td>1</td></tr>
      <tr><td>2</td></tr> 
      <tr><td>3</td></tr> 
      <tr><td>4</td></tr> 
      <tr><td>5</td></tr> 
      <tr><td>6</td></tr> 
      <tr><td>7</td></tr> 
      <tr><td>8</td></tr> 
      <tr><td>9</td></tr> 
      <tr><td>10</td></tr> 
    </tbody>
  </table>
</div>

这篇关于通过HTML& amp;使表格自动垂直滚动的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！