JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<table width="100%">
<tr><td>&nbsp;</td>
  <td><div>Actual</div><div>Mon-01</div></td>    		
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>Proj.</div><div>Mon-01</div></td> 
   <td><div>LRP</div><div>Mon-01</div></td> 
   <td><div>Actual</div><div>Mon-01</div></td>   
<td><div>Proj.</div><div>Mon-01</div></td> 
<td><div>LRP</div><div>Mon-01</div></td>    
</tr>
<!--Row -->
<tr>
<td class="hd">Total Devon</td> 
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="row_val" ng-repeat="">
<td><div>Act/Proj</div><div>Rev. Bus./LRP</div><div class="variance_brdr">Variance</div></td> 
  <td ><div class="val1">8.5</div><div class="val2">5.6</div><div class="variance_brdr sub"></div></td>    		
   <td ><div class="val1">8.5</div><div class="val2">2.6</div><div class="variance_brdr sub"></div></td> 
   <td ><div class="val1">8.5</div><div class="val2">5.6</div><div class="variance_brdr sub"></div></td>  
   <td ><div class="val1">8.5</div><div class="val2">5.6</div><div class="variance_brdr sub"></div></td> 
   <td ><div class="val1">8.5</div><div class="val2">5.6</div><div class="variance_brdr...

CSS

table { border-collapse:collapse; width:100%; font-family:arial;}
td { font-size:10px; padding:0; margin:0; text-align:center; vertical-align:middle;}
.variance_brdr { border-bottom:solid 1px #666; border-top:solid 1px #666;}
.hd {text-decoration: underline; text-align:left; }
td:nth-child(8) { border-right:solid 1px #666;}
td:nth-child(20) { border-right:solid 1px #666;}

JavaScript

$(document).ready(function(){	
$(".row_val td").each(function() {   
	var x = $(this).children('.val1').text();
	var y = $(this).children('.val2').text();
	var z = Number(x)-Number(y);
	var rowsubval = z.toPrecision(2); 
	$(this).children('.sub').html(rowsubval);    
});	
});