JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container-fluid py-4">
<div class="row mt-4">
<div class="col-12">
<div class="card mb-4">
<div class="card-header pb-0">
<p class="mb-1 pt-2 text-bold">01/09/2023</p>
<h5 class="font-weight-bolder">Mr. Banister</h5>
</div>
<div class="card-body px-0 pt-0 pb-2">
<div class="table-responsive p-0">
<table class="display" id="models" style="width:100%">
<thead>
<tr class="text-center mb-0 text-lg font-weight-bold">
<th rowspan="2">Rocket Name</th>
<th rowspan="2">Mission Specialists</th>
<th rowspan="2">Flight Engineers</th>
<th rowspan="2">Type</th>
<th colspan="1">Lift-off Weight</th>
<th colspan="2">Altitude</th>
<th rowspan="2">Egg</th>
<th rowspan="2">Shockcord</th>
<th rowspan="2">Nose cone</th>
<th rowspan="2">Coupler</th>
<th rowspan="2">Parachute</th>
<th rowspan="2">Notes</th>
</tr>
<tr class="text-center mb-0 text-lg font-weight-bold">
<th>grams</th>
<th>meters</th>
...
CSS
td div.scrolling-cell {
overflow: auto;
max-height: 3rem;
min-width: 30rem;
}