JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100%; color: black;">
<div style="float: left; width: 30%; margin-right: 2%;">
<table id="tabSemaine" style="height: 50%;" width="40%">
<tbody>
<tr>
<td class="titre" colspan="7"><center><strong>Dans la semaine</strong></center></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="titre" colspan="8" width="20"><center><strong>A faire sous 24h</strong></center></td>
</tr>
<tr>
<td colspan="7" width="50"></td>
</tr>
<tr>
<td colspan="7" width="50"></td>
</tr>
<tr>
<td colspan="7" width="50"></td>
</tr>
<tr>
<td colspan="7" width="50"></td>
</tr>
</tbody>
</table>
</div>
<div style="float: right; width: 20%; margin-left: 2%;">
<table id="tabTPM" style="height: 50%;" border="1" cellspacing="2" cellpadding="1">
<tbody>
<tr>
<td class="titre" colspan="7"><center><strong>Prochaine TPM LKT1 le : </strong></center></td>
</tr>
<tr>
<td>**</td>
</tr>
</tbody>
</table>
</div>
<div style="display: inline-block; text-align: center; width: 46%;">
        <table id="tabMilieu">
            <thead>
                <tr>
                    <th class="titre" colspan="11"><center><strong>Indicateur Levée du Jour</strong></center></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2"></td>
                    <td width="90">Obj</td>
                    <td width="70">V</td>
                    <td width="70">S</td>
                    <td width="70">D</td>
                    <td width="70">L</td>
                    <td width="70">M</td>
                    <td width="70">M</td>
                    <td width="70">J</td>
                </tr>
                <tr>
                    <td colspan="2" width="400">OEE</td>
                    <td class="default-value">61.7%</td>
       ...

CSS

table {border-collapse:collapse; border-spacing:0;}
table td {padding: 10px; border: 1px solid #000;}
table th {padding-bottom: 15px;}

JavaScript

(function($){

    var aRef = [];
    var colCount = $('table tbody tr:nth-child(1) td').length + 1;
    var rowCount = $('table tbody tr').length + 1;

    $('table tbody tr .default-value').each(function(){
        var valeurRef = $(this).text().replace('h', '').replace('%', '');
        aRef.push(valeurRef);
    });

    for(var r = 2; r<rowCount; r++){
        
        var current = 'table tbody tr:nth-child('+r+')';

        for(var c = 3; c<colCount; c++){
            var currentcell = $(current+' td:nth-child('+c+')');
            var valCur = currentcell.text().replace('h', '').replace('%', '');
            valCur = parseInt(valCur, 0);

            if(valCur !== '' && !isNaN(valCur)){
                
                currentcell.css({'background-color': (aRef[r-2] > valCur) ? '#EF4836' :'#2ECC71'});
                
            }
        } // end for col

    } // end for row

})(jQuery);