Сделать таблицу автоматической прокрутки по вертикали через 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> 

ПРИМЕЧАНИЕ: Я надеюсь, что это может быть achevied только HTML и CSS.

Любые предложения?

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>

Answer 2

I высоко рекомендуем использовать с помощью данного 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 { 
 
\t 0% { margin-left: 0; transform: translate3d(0%, 0, 0);} 
 
\t 25% { margin-left: 0; transform: translate3d(0%, 0, 0);} 
 
\t 75% { margin-left: 100%; transform: translate3d(-100%, 0, 0);} 
 
\t 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>

Answer 3

Код ниже не будет сброшен и вернется с верхней стороны таблицы, как задано в вопросе, но это поможет некоторым будущим читателям, которые пытаются прокрутить, и автоматически зациклирует строки таблицы с фиксированным заголовком.

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    \t <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
    \t  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    \t <script type="text/javascript"> 
 
    \t $.fn.infiniteScrollUp=function(){ 
 
    \t \t var self=this,kids=self.children() 
 
    \t \t kids.slice(20).hide() 
 
    \t \t setInterval(function(){ 
 
    \t \t \t kids.filter(':hidden').eq(0).fadeIn() 
 
    \t \t \t kids.eq(0).fadeOut(function(){ 
 
    \t \t \t \t $(this).appendTo(self) 
 
    \t \t \t \t kids=self.children() 
 
    \t \t \t }) 
 
    \t \t },1000) 
 
    \t \t return this 
 
    \t } 
 
    \t $(function(){ 
 
    \t \t $('tbody').infiniteScrollUp() 
 
    \t }) 
 
    \t </script> 
 
    \t <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>