JSFiddle - React, Tailwind, and code Playground

by sendil J

HTML

<div id="container">
   <div class="relativeContainer">
       <!-- Fixed Column for both scroller -->
       <div class="fixedTB">
           <table border="1" width="72px" cellspacing="1" cellpadding="0" >
               <tr><td>R1C1</td></tr>
           </table>
       </div>       
       <div class="leftContainer">          
           <!-- Fixed Column for horz scroller -->
           <div class="leftSBWrapper">
               <table border="1" width="72px" cellspacing="1" cellpadding="0">
                   <tr><td>R2C1</td></tr>
                   <tr><td>R3C1</td></tr>
                   <tr><td>R4C1</td></tr>
                   <tr><td>R5C1</td></tr>
                   <tr><td>R6C1</td></tr>
                   <tr><td>R7C1</td></tr>
                   <tr><td>R8C1</td></tr>       
                </table>
            </div>
        </div>    
        <div class="rightContainer">
            <div class="topSBWrapper">
                <table border="1" width="500px" cellspacing="1" cellpadding="0" align="center">
                   <tr>
                       <td>R1C2</td>
                       <td>R1C3</td>
                       <td>R1C4</td>
                       <td>R1C5</td>
                       <td>R1C6</td>
                       <td>R1C7</td>
                       <td>R1C8</td>
                   </tr>
                </table>
            </div>
            <div class="SBWrapper">
                <table border="1" width="500px" cellspacing="1" cellpadding="0" align="center" >
                   <tr>
                       <td>R2C2</td>
                       <td>R2C3</td>
                       <td>R2C4</td>
                       <td>R2C5</td>
                       <td>R2C6</td>
                       <td>R2C7</td>
                       <td>R2C8</td>
                   </tr>       
                   <tr>
                       <td>R3C2</td>
                       <td>R3C3</td>
                       <td>R3C4</td>
                      ...

CSS

#container { margin: 10px; overflow: hidden; }
.relativeContainer { position: relative; width: 500px; height: 166px; overflow: hidden; border: 1px solid green; }

td { background-color: white; padding: 2px; }

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

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

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

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

.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));        
    });
});