JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<div id="contenedor">
    <div id="esqIzquierda">
        <table>
            <tr>
                <td>
                    <b>Pepe</b>
                </td>
            </tr>
        </table>
    </div>
    <div id="indiceHorizontal">
         <table>
            <tr>
                <td>Cpra</td>
                <td>Vta</td>
                <td>Ult</td>
                <td>%</td>
                <td>Hora</td>
                <td>Ant</td>
                <td>Ape</td>
                <td>Min</td>
                <td>Max</td>
            </tr>
        </table>
    </div>
    <div id="indiceVertical">
        <table>
            <tr>
                <td>Pepe 1</td>
            </tr>
            <tr>
                <td>Pepe 2</td>
            </tr>
            <tr>
                <td>Pepe 3</td>
            </tr>
            <tr>
                <td>Pepe 4</td>
            </tr>
            <tr>
                <td>Pepe 5</td>
            </tr>
            <tr>
                <td>Pepe 6</td>
            </tr>
            <tr>
                <td>Pepe 7</td>
            </tr>
            <tr>
                <td>Pepe 1</td>
            </tr>
            <tr>
                <td>Pepe 2</td>
            </tr>
            <tr>
                <td>Pepe 3</td>
            </tr>
            <tr>
                <td>Pepe 4</td>
            </tr>
            <tr>
                <td>Pepe 5</td>
            </tr>
            <tr>
                <td>Pepe 6</td>
            </tr>
            <tr>
                <td>Pepe 7</td>
            </tr>
            <tr>
                <td>Pepe 1</td>
            </tr>
            <tr>
                <td>Pepe 2</td>
            </tr>
            <tr>
                <td>Pepe 3</td>
            </tr>
            <tr>
                <td>Pepe 4</td>
            </tr>
            <tr>
                <td>Pepe 5</td>
            </tr>
            <tr>
                <td>Pepe 6</td>
            </tr>
            <tr>
               ...

CSS

#esqIzquierda{
    width: 50px;
    position: relative;
    float: left;
}

#indiceHorizontal {
    width: 300px;
    overflow: hidden;
}

#indiceHorizontal table {
    width: 500px;
}

#data {
    height: 117px;
    width: 317px;
    overflow: scroll;
    position: relative;
    float: left;
}

#data table {
    width: 500px;
}

#indiceVertical {
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
    position: relative;
    float: left;
}

td {
    width: 50px !important;
}

JavaScript

$("#data").scroll(function() {
    $("#indiceVertical").find("table").css("marginTop", -1 * $(this).scrollTop());
    $("#indiceHorizontal").find("table").css("marginLeft", -1 * $(this).scrollLeft());
});