JSFiddle - React, Tailwind, and code Playground

by revathskumar

HTML

<div id="header">
    <table>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>college</td>
            <td>place</td>
        </tr>
    </table>
</div>

<div id="body">
    <table>
        <tr>
            <td>1</td>
            <td>Peter</td>
            <td>loreum</td>
            <td>lipsum</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Alex</td>
            <td>loreum</td>
            <td>lipsum</td>
        </tr>
        <tr>
            <td>3</td>
            <td>cyto</td>
            <td>loreum</td>
            <td>lipsum</td>
        </tr>
    </table>
</div>


<div id='vert'>
    <div id='left'>
        <table>
            <tr>
                <td> id </td>
            </tr>
            <tr>
                <td> 1 </td>
            </tr>
            <tr>
                <td> 2 </td>
            </tr>
            <tr>
                <td> 3 </td>
            </tr>
            <tr>
                <td> 4 </td>
            </tr>
            <tr>
                <td> 5 </td>
            </tr>
            <tr>
                <td> 6 </td>
            </tr>
            <tr>
                <td> 7 </td>
            </tr>
        </table>
    </div>
    <div id='right'>
        <table>
            <tr>
                <td> name </td>
                <td>college</td>
                <td>place</td>
            </tr>
            <tr>
                <td> Peter </td>
                <td>loreum</td>
                <td>lipsum</td>
            </tr>
            <tr>
                <td> Alex </td>
                <td>loreum</td>
                <td>lipsum</td>
            </tr>
            <tr>
                <td> cyto </td>
                <td>loreum</td>
                <td>lipsum</td>
            </tr>
            <tr>
                <td> name </td>
                <td>college</td>
                <td>place</td>
            </tr>
            <tr>
                <td> Peter </td>
               ...

CSS

#body{
    width:80%;
    overflow-x:scroll;
    overflow-y:hidden;
}
#header{
    width:80%;
    overflow:hidden
}
td{
    border:1px solid black;
}
table{
    width:600px;
}

#vert{
    width:100%;
    overflow:hidden;
}
#left{
    width:20px;
    height:80px;
    float:left;
    overflow:hidden;
    
}
#right{
    width:90%;
    height:100px;
    overflow:scroll;
}

JavaScript

jQuery(function() {
    $('#header td').each(function(index, value) {
        $('#body td:eq(' + index + ')').width($(this).width());
    });

    $("#body").scroll(function() {

        $('#header').scrollLeft($(this).scrollLeft());
        $('#body td:eq(0)').offset({
            left: 0,
            top: 0
        });
    });

    $('#right tr').each(function(index, value) {
        $('#body tr:eq(' + index + ')').height($(this).height());
    });

    $('#right').scroll(function() {
        $('#left').scrollTop($(this).scrollTop());
    });
});