JSFiddle - React, Tailwind, and code Playground
HTML
<div class="table-container">
<div id="firstTableWrapper">
<table id="firstTable" class="tableClass">
<tr class="trFirst">
<th><span>Make</span></th>
<td>Harley-Davidson</td>
<td>BMW</td>
<td>Honda</td>
<td>Yamaha</td>
<td>Ducati</td>
<td>Kawasaki</td>
</tr>
</table>
</div>
<table class="tableClass">
<tr>
<th><span>Model</span></th>
<td>Street Glide</td>
<td>R 1250 GS Adventure</td>
<td>CBR600RR</td>
<td>YZF-R6</td>
<td>Panigale V2</td>
<td>Ninja ZX-10R</td>
</tr>
<tr>
<th><span>Color</span></th>
<td>Black</td>
<td>White</td>
<td>Red</td>
<td>Blue</td>
<td>Red</td>
<td>Green</td>
</tr>
<tr>
<th><span>Year</span></th>
<td>2022</td>
<td>2021</td>
<td>2019</td>
<td>2020</td>
<td>2021</td>
<td>2022</td>
</tr>
<tr>
<th><span>Year</span></th>
<td>2022</td>
<td>2021</td>
<td>2019</td>
<td>2020</td>
<td>2021</td>
<td>2022</td>
</tr>
<tr>
<th><span>Year</span></th>
<td>2022</td>
<td>2021</td>
<td>2019</td>
<td>2020</td>
<td>2021</td>
<td>2022</td>
</tr>
</table>
</div>
CSS
.table-container {
max-width: 100%;
overflow-x: auto;
width: 100%;
border: 2px solid blue;
}
.trFirst th,
table th,
.trFirst td,
table td {
min-width: 400px;
}
tr {
height: 200px;
}
#firstTableWrapper {
position: fixed;
background: orange;
}