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(){
    var table = $('#mytable'), difference;
    
    table.find('tbody > tr').each(function(){
        difference = ($(this).find('td:eq(2)').text()*1) - ($(this).find('td:eq(3)').text()*1);
        $(this).find('td:eq(4)').text(difference);
        $(this).find('td:eq(5)').text(difference == 0 ? '' : 'X');
    });
});