JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th colspan="2">Object</th>
<th colspan="2">Openings</th>
<th colspan="3">Internal Dimensions</th>
<th colspan="3">Weight</th>
<th>Volume</th>
</tr>
<tr>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
</tr>
</thead>
<tbody>
<tr>
<th>header</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>header</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>header</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>header</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS
th, td {
font-weight:normal;
padding:5px;
width:120px;
vertical-align:top;
}
th {
background:#00B0F0;
}
tr + tr th, tbody th {
background:#DAEEF3;
}
tr + tr, tbody {
text-align:left
}
table, th, td {
border:solid 1px;
border-collapse:collapse;
table-layout:fixed;
}