JSFiddle - React, Tailwind, and code Playground
HTML
Table 1<br>
<table>
<thead>
<tr>
<th>Metric</th>
<th>Qty</th>
<th>Min</th>
<th>Avg</th>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr>
<td>Metric 1</td>
<td>tqty</td>
<td>min</td>
<td>avg</td>
<td>max</td>
</tr>
<tr>
<td>Metric 2</td>
<td>qty</td>
<td>min</td>
<td>avg</td>
<td>max</td>
</tr>
</tbody>
</table>
Table 2<br>
<table>
<thead>
<tr>
<th>Metric</th>
<th>Qty</th>
<th>Min</th>
<th>Avg</th>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr>
<td>Metric 1</td>
<td>tqty</td>
<td>min</td>
<td>avg</td>
<td>max</td>
</tr>
<tr>
<td>Metric 2</td>
<td>qty</td>
<td>min</td>
<td>avg</td>
<td>max</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th rowspan="2">Metric</th>
<th colspan="2">Qty</th>
<th colspan="2">Min</th>
<th colspan="2">Avg</th>
<th colspan="2">Max</th>
</tr>
<tr>
<td>table_1.label</td>
<td>table_2.label</td>
<td>table_1.label</td>
<td>table_2.label</td>
<td>table_1.label</td>
<td>table_2.label</td>
<td>table_1.label</td>
<td>table_2.label</td>
</tr>
</thead>
<tbody>
<tr>
<td>Metric 1</td>
<td>table_1 qty</td>
<td>table_2 qty</td>
<td>table_1 min</td>
<td>table_2 min</td>
<td>table_1 avg</td>
<td>table_2 avg</td>
<td>table_1 max</td>
<td>table_2 max</td>
</tr>
...
CSS
table, th, td {
border: 1px solid black;
}