JSFiddle - React, Tailwind, and code Playground

by sendil J

HTML

<table>
<tr class="firstRow">
    <td class="firstCol"><div></div></td>
    <td><div>Col 1</div></td>
    <td><div>Col 2</div></td>
    <td><div>Col 3</div></td>
    <td><div>Col 4</div></td>
    <td><div>Col 5</div></td>
    <td><div>Col 6</div></td>
    <td><div>Col 7</div></td>
    <td><div>Col 8</div></td>
    <td><div>Col 9</div></td>
    <td><div>Col 10</div></td>
    <td><div>Col 11</div></td>
    <td><div>Col 12</div></td>
    <td><div>Col 13</div></td>
    <td><div>Col 14</div></td>
    <td><div>Col 15</div></td>
</tr>
<tr>
    <td class="firstCol">
        <div>
            <span>Row 1</span>
            <span class="hIn">Increase Height</span>
            <span class="hDe">Decrease Height</span>
            <span class="hide">Hide</span>
        </div>
    </td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
</tr>
<tr>
    <td class="firstCol">
        <div>
            <span>Row 2</span>
            <span class="hIn">Increase Height</span>
            <span class="hDe">Decrease Height</span>
            <span class="hide">Hide</span>
        </div>
    </td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
    <td><div>Cell</div></td>
</tr>
<tr>
    <td class="firstCol">
        <div>
            <span>Row 3</span>
     ...

CSS

body {
    padding-top: 50px;
    padding-left: 100px;
}
table {
    overflow: visible;
    border-spacing: 0px;
}
.firstCol {
    position: fixed;
    left: 0;
}
.firstRow {
    position: fixed;
    top: 0;
}


/* Formatting */
td div {
    width: 150px;
    height: 100px;
    border: 1px solid blue;
}
.firstRow div {
    height: 50px;
}
.firstCol div {
    width: 100px;
}
.firstRow div, .firstCol div {
    background: #aaa;
}
.hIn, .hDe, .hide {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    font-size: 10px;
    display: block;
}

JavaScript

function syncHeadColumns() {
    $('.firstCol').each(function () {
        var offset = $(this).next().offset();
        $(this).offset(offset);
        $(this).css('left', '0');
        $(this).height($(this).next().height());
    });
    $('.firstRow').offset($('.firstRow').next().offset());
    $('.firstRow').css('top', '0');
 }

$(window).scroll(function () {
    syncHeadColumns();
});

$('.hIn').click(function () {
    $(this).parent().parent().parent().find('div').each(function () {
        $(this).height($(this).height()+50);
    });
    syncHeadColumns();
});

$('.hDe').click(function () {
    $(this).parent().parent().parent().find('div').each(function () {
        $(this).height($(this).height()-50);
    });
    syncHeadColumns();
});

$('.hide').click(function () {
    $(this).parent().parent().parent().css('display','none');
    syncHeadColumns();
});