JSFiddle - React, Tailwind, and code Playground

HTML

<center>
    <div id="plan">
        <table class="plan">
            <tr id="g0">
                <td class="p0"><table bgcolor="gray"><tr><td>0 0</td></tr></table></td>
                <td class="p1"><table bgcolor="blue"><tr><td>1 0</td></tr></table></td>
                <td class="p2"><table bgcolor="yellow"><tr><td>2 0</td></tr></table></td>
            </tr>
            <tr id="g1">
                <td class="p0"><table bgcolor="green"><tr><td>0 1</td></tr></table></td>
                <td class="p1"><table bgcolor="orange"><tr><td>1 1</td></tr></table></td>
                <td class="p2"><table bgcolor="red"><tr><td>2 1</td></tr></table></td>
            </tr>
            <tr id="g2">
                <td class="p0"><table bgcolor="brown"><tr><td>0 2</td></tr></table></td>
                <td class="p1"><table bgcolor="white"><tr><td style="color: black">1 2</td></tr></table></td>
                <td class="p2"><table bgcolor="crimson"><tr><td>2 2</td></tr></table></td>
            </tr>
        </table>
    </div>
    <br /><br /><br />Move Table<br />
    <button onClick="mvtb(0, 0);">0 0</button> &nbsp; <button onClick="mvtb(1, 0);">1 0</button> &nbsp; <button onClick="mvtb(2, 0);">2 0</button><br />
    <button onClick="mvtb(0, 1);">0 1</button> &nbsp; <button onClick="mvtb(1, 1);">1 1</button> &nbsp; <button onClick="mvtb(2, 1);">2 1</button><br />
    <button onClick="mvtb(0, 2);">0 2</button> &nbsp; <button onClick="mvtb(1, 2);">1 2</button> &nbsp; <button onClick="mvtb(2, 2);">2 2</button><br />
</center>

CSS

#plan {overflow: hidden; height: 200px; width: 660px; background: #444;}
.plan {width: 1980px;}
.plan table {height: 200px; width: 660px;}

JavaScript

x = y = 0;

function mvtb(p, g) {
    var i = 0;
    var tmp = setInterval(function() {
        if (i <= 100) {
            document.getElementById("plan").scrollTop = 200 * (y + ((g - y) * (i / 100)));
            document.getElementById("plan").scrollLeft = 660 * (x + ((p - x) * (i / 100)));
            i++;
        }
        else {
            clearInterval(tmp);
            x = p;
            y = g;
        }
    }, 10);

}