JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div class="table-container">
    <div class="headcol">
        <table>
            <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>
			<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>
				<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 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 booked">Already booked</td>
				<td class="cell available">Available for booking</td>
				<td class="cell available">Available for booking</td>
				<td class="cell available">Available for booking</td>
				<td class="cell booked">Already booked</td>
				<td class="cell booked">Already booked</td>
			</tr>
			<tr>
				<td class="cell...

CSS

.table-container {
    position: relative;
    height: 100%;
    width: 100%;
    border: 2px solid red;
    display: inline-block;
}

th {
    border: 1px solid black;
    padding: 10px;
}

td {
    border: 1px solid black;
    padding: 10px;
    margin: 0;
    white-space: nowrap
}

.right {
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 134px;
    width: 73%;
    
}