JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
	<table>
		<tbody>
			<tr>
				<th>Digit1</th>
				<th>Operator</th>
				<th>Digit2</th>
				<th>Equals</th>
				<th>Total</th>
			</tr>
			<tr>
				<td>52</td>
				<td>+</td>
				<td>42</td>
				<td>=</td>
				<td></td>
			</tr>
			<tr>
				<td>21</td>
				<td>+</td>
				<td>57</td>
				<td>=</td>
				<td></td>
			</tr>
			<tr>
				<td>111</td>
				<td>+</td>
				<td>45</td>
				<td>=</td>
				<td></td>
			</tr>
		</tbody>
	</table>
</div>

CSS

#main{max-width:600px;
    	margin:0 auto;padding:60px 0px;}
    	table{    margin: 5px;
    
    border: medium none rgb(221, 221, 221);
    background: rgb(238, 238, 238) none repeat scroll 0% 0%;
    border-collapse: collapse;
}
	table tr >th{padding: 5px;
border: 1px solid rgb(119, 119, 119);
background: red none repeat scroll 0% 0%;}
	table tr >td{padding: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(85, 85, 85) rgb(187, 187, 187) rgb(85, 85, 85) rgb(221, 221, 221);
text-align: center;
background: rgb(221, 221, 221) none repeat scroll 0% 0%;}

JavaScript

$('#main tr').each(function(i){
	  if(i==0)return true;
		var tr = $(this);
		var num1 = parseInt($('td', tr).eq(0).text());
		var num2 = parseInt($('td', tr).eq(2).text());
		$('td', tr).eq(4).text(num1 + num2);
	});