JSFiddle - React, Tailwind, and code Playground
HTML
<div class="subPro-table">
<p></p>
<table class="subPro-data" width="100%">
<tr>
<td><a href="#">NM18832</a></td>
<td>XYZ</td>
<td>1883</td>
<td>32 4/5 x 22</td>
<td>232</td>
<td>
<span class="old-price">$529.62</span><br>
<span class="new-price">$476.66</span>
</td>
<td>
<div class="btn-cart-holder">
<input name="" type="text"> <a href="#">Add to Cart</a>
</div>
</td>
</tr>
<tr>
<td><a href="#">NM18832</a></td>
<td>XYZ</td>
<td>1883</td>
<td>32 4/5 x 22</td>
<td>232</td>
<td>
<span class="old-price">$529.62</span><br>
<span class="new-price">$476.66</span>
</td>
<td>
<div class="btn-cart-holder">
<input name="" type="text"> <a href="#">Add to Cart</a>
</div>
</td>
</tr>
<tr>
<td><a href="#">NM18832</a></td>
<td>XYZ</td>
<td>1883</td>
<td>32 4/5 x 22</td>
<td>232</td>
<td>
<span class="old-price">$529.62</span><br>
<span class="new-price">$476.66</span>
</td>
<td>
<div class="btn-cart-holder">
<input name="" type="text"> <a href="#">Add to Cart</a>
</div>
</td>
</tr>
<tr>
<td><a href="#">NM18832</a></td>
<td>XYZ</td>
...
CSS
/* =Sub Product Section */
.subPro-data th {color:#fff; font-weight:bold; background-color:#888; padding:7px 5px;}
.subPro-data th + th {border-left:1px solid #fff;}
.subPro-data tr:nth-child(4n+1),.subPro-data tr:nth-child(4n+2){
background-color : #ededed;
}