JSFiddle - React, Tailwind, and code Playground

by Sagar Bendale

HTML

<div class="outer-container">
        <div class="inner-container">
            <div class="table-header">
                <table id="headertable">
                    <thead>
                        <tr>
                            <th class="header-cell col1">One</th>
                            <th class="header-cell col2">Two</th>
                            <th class="header-cell col3">Three</th>
                            <th class="header-cell col4">Four</th>
                            <th class="header-cell col5">Five</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="table-body">
                <table id="bodytable">
                    <tbody>
                        <tr>
                            <td class="body-cell col1">body row1</td>
                            <td class="body-cell col2">body row2</td>
                            <td class="body-cell col3">body row2</td>
                            <td class="body-cell col4">body row2</td>
                            <td class="body-cell col5">body row2 en nog meer</td>
                        </tr>
                        <tr>
                            <td class="body-cell col1">body row1</td>
                            <td class="body-cell col2">body row2</td>
                            <td class="body-cell col3">body row2</td>
                            <td class="body-cell col4">body row2</td>
                            <td class="body-cell col5">body row2 en nog meer</td>
                        </tr>
                        <tr>
                            <td class="body-cell col1">body row1</td>
                            <td class="body-cell col2">body row2</td>
                            <td class="body-cell col3">body row2</td>
                            <td class="body-cell col4">body row2</td>
                            <td class="body-cell col5">body row2 en nog meer</td>
                  ...

CSS

*
{
    padding: 0;
    margin: 0;
}

body
{
    height: 100%;
    width: 100%;
}
table
{
    border-collapse: collapse;
}
.outer-container
{
    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom: 40px;
}

.inner-container
{
    height: 100%;
    overflow: hidden;
}

.table-header
{
    position: relative;
}
.table-body
{
    overflow: auto;
}

.header-cell
{
    background-color: yellow;
    text-align: left;
    height: 40px;
}
.body-cell 
{
    background-color: blue;
    text-align: left;
}
.col1, .col3, .col4, .col5
{
    width:120px;
    min-width: 120px;
}
.col2
{
    min-width: 300px;
}

JavaScript

$(document).ready(function () {
    setTableBody();
    $(window).resize(setTableBody);
    $(".table-body").scroll(function ()
    {
        $(".table-header").offset({ left: -1*this.scrollLeft });
    });
});

function setTableBody()
{
    $(".table-body").height($(".inner-container").height() - $(".table-header").height());
}