JSFiddle - React, Tailwind, and code Playground
HTML
<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>
<td>64</td>
<td>60</td>
<td>61.7</td>
<td>20</td>
<td>2</td>
<td>22</td>
<td>43</td>
</tr>
<tr>
<td colspan="2" width="400">Temps de panne</td>
<td class="default-value">1h10</td>
<td>2h15</td>
<td>0h30</td>
<td>1h11</td>
<td>0</td>
<td>0</td>
<td>1h09</td>
<td>2h34</td>
</tr>
<tr>
<td colspan="2" width="400">Cadence</td>
<td class="default-value">10</td>
<td>1</td>
<td>15</td>
<td>8</td>
<td>1</td>
<td>22</td>
<td>14</td>
<td>16</td>
</tr>
<tr>
<td colspan="2" width="400">Quantité rebuts</td>
<td class="default-value">489</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 = 11;
var rowCount = 6;
$('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('%', '');
if(valCur !== '' && !isNaN(valCur)){
currentcell.css({'background-color': (aRef[r-2] > valCur) ? '#EF4836' :'#2ECC71'});
}
} // end for col
} // end for row
})(jQuery);