JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-container">
     <div class="headcol">
    <table id="header-fixed1">
    <thead>
                <th>Room</th>
               
     </thead>
     </table>
        
   
        
        <table id="tablepart1">
            <thead>
                <th>Room</th>
            </thead>
            <tbody>
                <tr>
                    <td>Fooname</td>
                </tr>
                <tr>
                    <td>Barname</td>
                </tr>
                <tr>
                    <td>Barfoo</td>
                </tr>
                <tr>
                    <td>Zorzor</td>
                </tr>
                <tr>
                    <td>Lorname Ipsname</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="right">
        <table id="header-fixed2">
    <thead>
               <th>8-10</th>
                <th>10-12</th>
                <th>12-14</th>
                <th>14-16</th>
                <th>16-18</th>
                <th>18-20</th>
               
     </thead>
     </table>
         
        <table id="tablepart2">
            <thead>
                <th>8-10</th>
                <th>10-12</th>
                <th>12-14</th>
                <th>14-16</th>
                <th>16-18</th>
                <th>18-20</th>
            </thead>
            <tbody>
                <tr>
                    <td class="cell booked">Already booked</td>
                    <td class="cell available">Available for booking</td>
                    <td class="cell booked">Already booked</td>
                    <td class="cell booked">Already booked</td>
                    <td class="cell available">Available for booking</td>
                    <td class="cell available">Available for booking</td>
                </tr>
                <tr>
                    <td class="cell available">Available for booking</td>
                    <td class="cell booked">Already booked</td>
                   ...

CSS

.table-container {
    position: relative;
    width: 600px;
    height: 100%;
    border: 2px solid red;
    display: inline-block;
}
table {
    float: left;
}
th {
    border: 1px solid black;
    padding: 10px;
}
td {
    border: 1px solid black;
    padding: 10px;
    margin: 0;
    white-space: nowrap
}
.right {
    overflow: auto;
}
#header-fixed1 {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}
#header-fixed2 {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

JavaScript

var tableOffset = $("#tablepart1").offset().top;

var $fixedHeader1 = $("#header-fixed1");
var $fixedHeader2 = $("#header-fixed2");


$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader1.is(":hidden")) {
        $fixedHeader1.show();
        $fixedHeader2.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader1.hide();
        $fixedHeader2.hide();
    }
});