JSFiddle - React, Tailwind, and code Playground
HTML
<table border="1px">
<thead>
<tr class="first">
<td rowspan="2">Item No</td>
<th colspan="2">Store ABC</th>
<th colspan="2">Store DEF</th>
</tr>
<tr class="second">
<th>Baskets</th>
<th>Customers</th>
<th>Baskets</th>
<th>Customers</th>
</tr>
</thead>
<tbody>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
<td>345</td>
<td>345</td>
<td>345</td>
</tr>
<tr>
<th>123</th>
<td>345</td>
...
CSS
table {
height: 100%;
border-collapse: collapse;
width: 100%;
margin: 10px;
font-size: 0.8em;
}
thead tr.first th, thead tr.first td {
position: sticky;
top: 0;
background: #eee;
}
thead tr.second th, thead tr.second td {
position: sticky;
top: 17px;
background: #eee;
}