JSFiddle - React, Tailwind, and code Playground

by protasovams

HTML

<div id="wrapper" tabindex="0">
    <div id="head">
        <table>
            <thead>
                <tr><th>Description</th></tr>
            </thead>
        </table>
    </div>
    <div id="row-wrapper">
        <div id="row">
        <table>
            <thead>
                <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th><th>Col 6</th><th>Col 7</th><th>Col 8</th><th>Col 9</th><th>Col 10</th><th>Col 11</th><th>Col 12</th></tr>
            </thead>
        </table>
    </div>
    </div>
    <div id="col-wrapper">
        <div id="col">
        <table>
            <tbody>
                <tr><td>Row 1 des</td></tr>
                <tr><td>Row 2 des</td></tr>
                <tr><td>Row 3 des</td></tr>
                <tr><td>Row 4 des</td></tr>
                <tr><td>Row 5 des</td></tr>
                <tr><td>Row 6 des</td></tr>
                <tr><td>Row 7 des</td></tr>
                <tr><td>Row 8 des</td></tr>
                <tr><td>Row 9 des</td></tr>
                <tr><td>Row 10 des</td></tr>
                <tr><td>Row 11 des</td></tr>
                <tr><td>Row 12 des</td></tr>
                <tr><td>Row 13 des</td></tr>
                <tr><td>Row 14 des</td></tr>
                <tr><td>Row 15 des</td></tr>
            </tbody>
        </table>
    </div>
    </div>
    <div id="table">
        <table>
            <tbody>
                <tr><td>Row 1.1</td><td>Row 1.2</td><td>Row 1.3</td><td>Row 1.4</td><td>Row 1.5</td><td>Row 1.6</td><td>Row 1.7</td><td>Row 1.8</td><td>Row 1.9</td><td>Row 1.10</td><td>Row 1.11</td><td>Row 1.12</td></tr>
                <tr><td>Row 2.1</td><td>Row 2.2</td><td>Row 2.3</td><td>Row 2.4</td><td>Row 2.5</td><td>Row 2.6</td><td>Row 1.7</td><td>Row 1.8</td><td>Row 1.9</td><td>Row 1.10</td><td>Row 1.11</td><td>Row 1.12</td></tr>
                <tr><td>Row 3.1</td><td>Row 3.2</td><td>Row 3.3</td><td>Row 3.4</td><td>Row 3.5</td><td>Row 3.6</td><td>Row 1.7</td><td>Row 1.8</td><td>Row...

CSS

#wrapper {
    background: #dddddd;
    position: absolute;

}
#head{
    background:#1299cc;
    position:absolute;
    overflow: hidden;
    top:0;
    left:0;
    height:50px;
    width:100px;
    z-index:4;
    border-bottom-width:2px;
border-bottom-color: black;
border-bottom-style: solid;
    border-right-width:2px;
    border-right-color: black;
    border-right-style: solid;
}
#row-wrapper{
    background:#5512f6;
    position:absolute;
    overflow: hidden;
    top:0;
    right:17px;
    left:100px;
    height:50px;
    z-index:3;
        border-bottom-width:2px;
border-bottom-color: black;
border-bottom-style: solid;

}
#row, #col{
    background:#5512f6;
    position:relative;
    width:100%;
    height: 100%;
}
#col-wrapper{
    background:#aa12ce;
    position:absolute;
    overflow: hidden;
    width: 100px;
    top:50px;
    left:0;
    bottom:17px;
    z-index:2;
    border-right-width:2px;
    border-right-color: black;
    border-right-style: solid;
}
#table{
    background:#ff28cf;
    position:absolute;
    overflow: scroll;
    top:50px;
    left:100px;
    bottom:0;
    right:0;
    z-index:1;
}
table {
    background: #ffffff;
}
th,tr {
    height: 50px;
}
th, td {
    border: 1px solid black;
    text-align: center;
    font-variant:small-caps;
    min-width: 100px;
}

JavaScript

$(document).ready(function() {
function scrollHandler(e) {
        $('#row').css('left', -$('#table').get(0).scrollLeft);
        $('#col').css('top', -$('#table').get(0).scrollTop);
    }
    $('#table').scroll(scrollHandler);
    
    var animate = false;
    $('#wrapper').keydown(function(event) {
        if (event.keyCode == 37 && !animate) {
            animate = true;
            $('#table').animate({ scrollLeft: "-=200" }, "slow", function() {
                animate = false;
            });
            event.preventDefault();
        } else if (event.keyCode == 39 && !animate) {
        animate = true;
        $('#table').animate({ scrollLeft: "+=200" }, "slow", function() {
            animate = false;
        });
        event.preventDefault();
        } else if (event.keyCode == 38 && !animate) {
        animate = true;
        $('#table').animate({ scrollTop: "-=200" }, "slow", function() {
            animate = false;
        });
        event.preventDefault();
        } else if (event.keyCode == 40 && !animate) {
        animate = true;
        $('#table').animate({ scrollTop: "+=200" }, "slow", function() {
            animate = false;
        });
        event.preventDefault();
        }
    });
});