Machen Sie Tabelle automatisches Scrollen vertikal über HTML & CSS

Question

Ich habe eine einfache Bootstrap-Tabelle, die ich vertikal scroll automatisch versuchen möchte. Der Grund dafür ist, dass die Tabelle auf einem Bildschirm angezeigt wird und die Tabelle 10 oder 100 Elemente enthalten kann. Daher möchte ich, dass sie automatisch vertikal scrollt, sodass der Benutzer sie nicht manuell durchführen muss. Nachdem das Ende erreicht ist, wird es nur zurückgesetzt und wieder von oben ...

Das ist mein Markup so weit starten:

<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> 

HINWEIS: Ich hoffe, dies kann mit nur HTML achevied werden und CSS.

Irgendwelche Vorschläge?

Answer 1

JS (oder jQuery) benötigt, um das eigentliche Element height und scrollHeight und führen Sie die Animation auf diesen Werten zu erhalten

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 stark empfehlen, die Verwendung von Javascript für diese. Ich habe das mit CSS nur einmal probiert und dann prompt die Idee aufgegeben, aber es ist theoretisch möglich. Die folgende Demo ist nicht getestet auf allen Browsern, hat große Kompatibilitätsprobleme und war das jämmerlichste jemals auf Safari. Moral der Geschichte: Verwenden Sie 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

Der Code unter wird nicht zurückgesetzt und beginnt von oben die Tabelle wie in der Frage gefragt, aber dies wird einigen zukünftigen Lesern helfen, die scrollen und Schleife die Tabellenzeilen automatisch mit einem festen Header.

<!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>