JSFiddle - React, Tailwind, and code Playground
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>
...
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;
}