JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<div id="container">
    <div class="relativeContainer">
        <!-- Fixed Column for both scroller -->
        <div class="fixedTB">
            <table width="80px" cellspacing="1" cellpadding="0" >
                <tr>
                    <td>
                        &nbsp;
                    </td>
                </tr>
            </table>
        </div>       
        <div class="leftContainer">          
            <!-- Fixed Column for horz scroller -->
            <div class="leftSBWrapper">
                <table width="80px" cellspacing="1" cellpadding="0">
                    <tr><td>HeadRow</td></tr>
                    <tr><td>HeadRow</td></tr>
                    <tr><td>HeadRow</td></tr>
                    <tr><td>HeadRow</td></tr>
                    <tr><td>HeadRow</td></tr>
                    <tr><td>HeadRow</td></tr>
                    <tr><td>HeadRow</td></tr>       
                </table>
            </div>
        </div>    
        <div class="rightContainer">
            <div class="topSBWrapper">
                <table width="700px" cellspacing="1" cellpadding="0" align="center">
                    <tr>
                        <td>HeadCol</td>
                        <td>HeadCol</td>
                        <td>HeadCol</td>
                        <td>HeadCol</td>
                        <td>HeadCol</td>
                        <td>HeadCol</td>
                        <td>HeadCol</td>
                    </tr>
                </table>
            </div>
            <div class="SBWrapper">
                <table width="700px" cellspacing="1" cellpadding="0" align="center" >
                    <tr>
                        <td>Content row 1</td>
                        <td>Content row 1</td>
                        <td>Content row 1</td>
                        <td>Content row 1</td>
                        <td>Content row 1</td>
                        <td>Content row 1</td>
                        <td>Content row 1</td>
          ...

CSS

#container { 
                margin: 10px; 
                overflow: hidden; 
            }

            .relativeContainer { 
                position: relative; 
                width: 510px; 
                height: 166px;
                overflow: hidden;
                border: 2px solid green;
            }

            td { 
                padding: 2px; 
                border: 1px solid black;
            }

            .fixedTB { 
                position: absolute; 
                left: 0px;
                top: 0px; 
                z-index: 11; 
            }

            .fixedTB td { 
                font-weight: bold;
                background: #e2e2e2;
            }

            .leftContainer { 
                position: absolute;
                left: 0px; 
                top: 26px; 
                height: 150px; 
                overflow: hidden;
            }

            .rightContainer { 
                position: absolute; 
                left: 80px; 
                top: 0px; 
                width: 429px;
                overflow: hidden;
            }

            .leftSBWrapper { 
                position: relative; 
                left: 0px; 
                top: 0px;
                z-index: 10; 
                margin-top: 2px;
            }

            .leftSBWrapper td {
                font-weight: bold;
                background: #e2e2e2;
            }

            .topSBWrapper { 
                position: relative; 
                left: 0px; 
                top: 0px; 
                z-index: 10;
            }

            .topSBWrapper td {
                font-weight: bold; 
                background: #e2e2e2; 
            }

            .SBWrapper { 
                width: 429px; 
                height: 140px;
                overflow: auto; 
            }

JavaScript

$(function () {
    $('.SBWrapper').scroll(function () {
        var rc = $(this).closest('.relativeContainer');
        var lfW = rc.find('.leftSBWrapper');
        var tpW = rc.find('.topSBWrapper');
        
        lfW.css('top', ($(this).scrollTop()*-1));
        tpW.css('left', ($(this).scrollLeft()*-1));        
    });
});