JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<div style='position: relative; height: 290px; width: 100%; z-index: 1;'>
    <div id='firstCol'><table id='data' width=115px><thead><tr><th width=115px>SN</th></tr></table></div>
    <div id='leftmenu' dir='rtl'><table id='data' width=115><tbody><tr height='24px'><th width=115>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr><tr height='24px'><th>Number</th></tr></tbody></table></div>
    <div id='topmenu'><table id='data' width=384px><thead><tr><th width=115>Scan Date</th><th width=169>Complaint</th><th width=100>Result</th></tr></thead></table></div>
    <div id='datacenter'><table id='data' width=384px><tbody><tr height='24px'><td width=115>2014-05-07</td><td width=169>Wont Update</td><td width=100>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr><tr height='24px'><td>2014-05-07</td><td>Wont Update</td><td>Scrap</td></tr></tbody></table></div></div></div>

CSS

table#data { font-size: 14px; border-collapse: collapse; table-layout: fixed; word-wrap: break-word;}

table#data thead th { background-color: #FFE671; color: #380B61; border: 1px solid #B0B0B0; padding-right: 0px; padding-left: 0px; }
table#data tbody th { background-color: #FFF1B0; border: 1px solid #B0B0B0; padding-right: 0px; padding-left: 0px; }
table#data tbody td { border: 1px solid #B0B0B0; padding-right: 0px; padding-left: 0px; }
table#data tr:hover { background-color: #AAFF71; }
table#data tr { height: 24px; }

#firstCol {
    position : absolute;
    top      : 0px;
    left     : 17px;
    width    : 117px;
    height   : 25px;
    overflow : hidden;
    background-color: #F5F3EF;
    z-index  : 3;
}

#topmenu {
    position : absolute;
    top      : 0px;
    left     : 134px;
    width    : 286px;
    height   : 25px;
    overflow : hidden;
    background-color: #F5F3EF;
    z-index  : 3;
}

#leftmenu {
    position : absolute;
    top      : 25px;
    left     : 0px;
    width    : 134px;
    height   : 221px;
    overflow-x : hidden;
    overflow-y : scroll;
    background-color: #F5F3EF;
    z-index  : 3;
}
#datacenter {
    position : absolute;
    top      : 25px;
    left     : 134px;
    width    : 302px;
    height   : 238px;
    overflow : scroll;
    background-color: #F5F3EF;
    z-index  : 2;
}

JavaScript

$(window).load( function() {
$('#datacenter').on('scroll', function () {
    $('#leftmenu').scrollTop($(this).scrollTop());
    $('#topmenu').scrollLeft($(this).scrollLeft());
});

$('#leftmenu').scroll(function () {
    $('#datacenter').scrollTop($(this).scrollTop());
});
});