JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" class="table_wrap">
 <div class="table_scroll" style="left: 0px;">

 <table cellpadding="0" cellspacing="5" width="1920px">
    <tr>
        <td style="background-color: red;">
            a
        </td>
        <td style="background-color: blue;">
            b
        </td>
    </tr>
 </table>

 </div>
 </div>

CSS

.table_wrap{
 position:relative;
 overflow:hidden;
 width: 967px;
 height: 250px;
 left: -2px;
 top: 5px;
 }
 .table_wrap .table_scroll{
 position: absolute;
 text-align:center;
 white-space:nowrap;
 }

JavaScript

var elem = document.getElementById('wrapper');
elem.addEventListener('click', move);

function move() {
    var left = 0

    function frame() {
        
        left -= 5;  // update parameters 
        
        elem.style.left = left + 'px' // show frame 
        
        if (left == -965)  // check finish condition
            clearInterval(id)
        }
   
    var id = setInterval(frame, 1) // draw every 10ms
}