JSFiddle - React, Tailwind, and code Playground

HTML

<table class="materialSheet" style="width:100%;">
    <thead>
        <tr>
            <td colspan="8">Lot Number:</td>
        </tr>
                <tr>
                    <td colspan="8">Batch/Lot Number:</td>
        </tr>
		<tr>
			<td colspan="2">Raw Material</td>
			<td colspan="2">Raw Material Lot Number</td>
			<td colspan="1">Weight (gms)</td>
			<td colspan="1">Tolerance (+/-)</td>
			<td colspan="1">Verified</td>
		</tr>        
    </thead>
	<tbody>
        <tr>
			<td colspan="2">number <span>Material Name</span></td>
			<td colspan="2"></td>
			<td colspan="1">5600</td>
			<td colspan="1">10</td>
			<td colspan="1">Verified</td>
		</tr>
	</tbody>
    <tfoot>
        <tr>
            <td colspan="8">Signed:</td>
        </tr>
        <tr>
            <td colspan="8">Date:</td>
        </tr>        
    </tfoot>
</table>

CSS

table.materialSheet {text-align:center;border-spacing:0px 5px;}
.materialSheet td{border:1px solid #999;padding:5px;}
.materialSheet thead {font-weight:bold;font-size:120%;}
.materialSheet tbody span {display:block;}
.materialSheet thead tr td,.materialSheet tfoot tr td {text-align:left;padding:10px;}