JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" style="text-align:center;border-collapse:collapse;" class="content" id="tblK3Graph">
<tbody><tr>
<td height="24" style="width:7%" class="gridHeader">Grade</td>
<td height="24" style="width:9%" class="gridHeader">Level</td>
<td height="24" style="width:11%;" class="gridHeader">Performance<br>Level</td>
<td height="24" class="gridHeader" colspan="3">K</td>
<td height="24" class="gridHeader" colspan="3">1</td>
<td height="24" class="gridHeader" colspan="3">2</td>
<td height="24" class="gridHeader" colspan="3">3</td>
</tr>
<tr>
<td height="24" class="content grade" rowspan="12">3</td>
<td height="24" rowspan="3">40</td>
<td height="24">Advanced</td>
<td width="50px;" height="24" style="background-color:#eeeeee;border-top:;border-left:;border-right:;border-bottom:;">
</td>
<td width="50px;" height="24" style="background-color:#eeeeee;border-top:;border-left:;border-right:;border-bottom:;">
</td>
<td width="50px;" height="24" style="background-color:#eeeeee;border-top:;border-left:;border-right:3px solid #616161;border-bottom:;">
</td>
<td width="50px;" height="24" style="background-color:#eeeeee;border-top:;border-left:;border-right:;border-bottom:;">
</td>
<td width="50px;" height="24" style="background-color:#eeeeee;border-top:;border-left:;border-right:;border-bottom:;">
</td>
<td width="50px;" height="24" style="background-color:#eeeeee;border-top:;border-left:;border-right:3px solid #616161;border-bottom:;">
</td>
<td width="50px;" height="24" style="background-color:#eeeeee;border-top:;border-left:;border-right:;border-bottom:;">
</td>
<td width="50px;" height="24"...
CSS
.gridHeader
{
background-color:#B0B0B0;
text-align:center;
color:White;
font-weight:bold;
padding-top:0px !important;
padding-bottom:0px !important;
}
.grade
{
background-color: #B0B0B0 !important;
color: white;
font-weight: bold;
}
.grade-header
{
padding-left:12px;
padding-right:12px;
}
#tblK3Graph td
{
border:1px solid #616161 !important;
background-color:#EEEEEE;
}