JSFiddle - React, Tailwind, and code Playground

by Prasad Gavande

HTML

<div id="tableDiv" style="overflow: auto; width: 300px; height: 200px;">
<table border="1" id="table">
    <tr>
        <td>
            first TR first TD
        </td>
        <td>
            first TR second TD
        </td>
        <td>
            first TR third TD
        </td>
        <td>
            first TR forth TD
        </td>
        <td>
            first TR fifth TD
        </td>
        <td>
            first TR sixth TD
        </td>
    </tr>
    <tr>
        <td>
            second TR first TD
        </td>
        <td>
            second TR second TD
        </td>
        <td>
            second TR third TD
        </td>
        <td>
            second TR forth TD
        </td>
        <td>
            second TR fifth TD
        </td>
        <td>
            second TR sixth TD
        </td>
    </tr>  
    <tr>
        <td>
            third TR first TD
        </td>
        <td>
            forth TR second TD
        </td>
        <td>
            fifth TR third TD
        </td>
        <td>
            sixth TR forth TD
        </td>
        <td>
            seventh TR fifth TD
        </td>
        <td>
            eigth TR sixth TD
        </td>
    </tr>
</table>
</div>

JavaScript

$("#tableDiv").mousemove(function () {
                $(this).css("overflow", "auto");
                $(this).scrollLeft(event.pageX);
                $(this).scrollTop(event.pageY);

            });
            $("#tableDiv").mouseleave(function () {
                $(this).css("overflow", "hidden");
            });