JSFiddle - React, Tailwind, and code Playground

HTML

<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>No</th><th>Nama</th></tr>
    </thead>
    <tbody>  
      <tr><td>1</td><td>Alex Mahandari</td></tr>
      <tr><td>2</td><td>Imam Munandar</td></tr> 
      <tr><td>3</td><td>Oman</td></tr> 
      <tr><td>4</td><td>Rifki Azhar</td></tr> 
      <tr><td>5</td><td>Kusuma Atmaja</td></tr> 
      <tr><td>6</td><td>Ayu Wulansari</td></tr> 
      <tr><td>7</td><td>Yeyen Martini</td></tr> 
      <tr><td>8</td><td>Toim</td></tr> 
      <tr><td>9</td><td>Candra Daniel</td></tr> 
      <tr><td>10</td><td>Wisnu Gunawan</td></tr> 
    </tbody>
  </table>
</div>

CSS

.table-responsive{
  height:180px; width:80%;
  overflow-y: auto;
  border:2px solid #444;
}.table-responsive:hover{border-color:red;}
 
table{width:100%;}
td{padding:24px; background:#eee;

JavaScript

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