JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/meetselva/fixed-table-rows-cols/master/js/fixed_table_rc.js"></script>
<link rel="stylesheet" href="https://rawgit.com/meetselva/fixed-table-rows-cols/master/css/fixed_table_rc.css">
<div class="table-container">
        <table id="fixedHeader">
            <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>
                <th>20-22</th>
                <th>22-24</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 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>
                    <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 available">Available for booking</td>
                    <td class="cell booked">Already booked</td>
                    <td class="cell available">Available for booking</td>
                </tr>
                <tr>
                    <td class="cell booked">Already booked</td>
                    <td class="cell available">Available for booking</td>
                    <td class="cell booked">Already...

CSS

thead{
    background-color:brown;
}

JavaScript

$(document).ready(function() {
	$('#fixedHeader').fxdHdrCol({
		fixedCols:  2,
		width:     "100%",
		height:    400,
		colModal: [
			   { width: 100, align: 'center' },
			   { width: 70, align: 'center' },
			   { width: 70, align: 'left' },
			   { width: 70, align: 'left' },
			   { width: 70, align: 'left' },
			   { width: 70, align: 'left' },
			   { width: 70, align: 'left' },
			   { width: 70, align: 'center' },
		],
	});
   });