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

Question

我有一个简单的引导程序表，我试图让它自动垂直滚动。这样做的原因是表格将显示在屏幕上并且表格中可能有 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 来实现。

有什么建议么？

原文由 Code 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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>

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我 强烈 建议为此使用 javascript。我只使用 CSS 尝试过一次，然后立即放弃了这个想法，但这在理论上是可行的。以下演示 并未 在所有浏览器上进行测试，存在巨大的兼容性问题，并且是 Safari 上最糟糕的事情。故事的寓意：使用javascript。

 @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);

.table-responsive {
  overflow-x: hidden;
}

table.table {
  animation: ani linear 1s alternate infinite;
}

.table-responsive:hover {
  overflow: auto;
}
.table-responsive:hover table.table {
  animation: none ;
}

@keyframes ani {
	0% { margin-left: 0; transform: translate3d(0%, 0, 0);}
	25% { margin-left: 0; transform: translate3d(0%, 0, 0);}
	75% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
	100% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
}

 <div class="table-responsive">
  <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>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</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>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <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>

原文由 Joseph Marikle 发布，翻译遵循 CC BY-SA 3.0 许可协议