JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<table id="mytable" class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>Name</th>
					<th>Hours a</th>
					<th>Hours b</th>
					<th>Diffrence</th>
					<th>Check</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Developer</td>
					<td>3</td>
					<td>3</td>
					<td></td>
					<td></td>
				</tr>
                <tr>
					<td>1</td>
					<td>Developer</td>
					<td>3</td>
					<td>3</td>
					<td></td>
					<td></td>
				</tr>
                <tr>
					<td>1</td>
					<td>Developer</td>
					<td>3</td>
					<td>2</td>
					<td></td>
					<td></td>
				</tr>
                <tr>
					<td>1</td>
					<td>Developer</td>
					<td>9</td>
					<td>3</td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>

CSS

table {
  border-spacing: 0;
  border-collapse: collapse;
}
thead {
  display: table-header-group;
 }
tr{
  page-break-inside: avoid;
}
td,th {
  padding: 0;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

JavaScript

function check(){
    var table = document.getElementById("mytable");
    var difference;
    
    for(var i=1; i<table.rows.length; i++){
        difference = (table.rows[i].cells[2].innerHTML*1) - (table.rows[i].cells[3].innerHTML*1);
        table.rows[i].cells[4].innerHTML = difference;
        table.rows[i].cells[5].innerHTML = difference == 0 ? '' : 'X';
    }
}

window.onload = check;