JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead style="position:fixed;">
		<tr >
			<td rowspan="2" class="row-header">[Product.Color]</td><td rowspan="2" class="row-header">[Product.SizeUnitMeasureCode]</td><td >False</td><td >True</td>
		</tr><tr>
			<td >True</td><td >True</td>
		</tr>
	</thead>
</table>
<table >
	<thead>
		<tr >
			<td rowspan="2" class="row-header">[Product.Color]</td><td rowspan="2" class="row-header">[Product.SizeUnitMeasureCode]</td><td >False</td><td >True</td>
		</tr><tr>
			<td >True</td><td >True</td>
		</tr>
	</thead><tbody>
		<tr>
			<td rowspan="2" class="row-header">Blue</td><td class="row-header"></td><td >225.49</td><td ></td>
		</tr><tr>
			<td class="row-header">CM </td><td ></td><td >23790.17</td>
		</tr><tr>
			<td class="row-header">Grey</td><td class="row-header"></td><td >125</td><td ></td>
		</tr><tr>
			<td class="row-header">Multi</td><td class="row-header"></td><td >478.92</td><td ></td>
		</tr><tr>
			<td rowspan="2" class="row-header">Yellow</td><td class="row-header"></td><td >215.96</td><td ></td>
		</tr><tr>
			<td class="row-header">CM </td><td ></td><td >34311.33</td>
		</tr>
	</tbody>
</table>

CSS

table {
    border: 1px solid black;
    border-collapse: collapse;
}

thead td {
    background-color: gray;
}

.row-header {
    color: red;
}

td {
    border: 1px solid black;
}