JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <caption>Etat des volets</caption>
  <tr>
    <th>v1</th>
    <th>v2</th>
    <th>v3</th>
    <th>v4</th>
    <th>v5</th>
    <th>v6</th>
    <th>v7</th>
    <th>v8</th>
    <th>v9</th>
  </tr>
  <tr id="vol">
    <td id="v1">

    </td>
    <td id="v2">

    </td>
    <td id="v3">

    </td>
    <td id="v4">

    </td>
    <td id="v5">

    </td>
    <td id="v6">

    </td>
    <td id="v7">

    </td>
    <td id="v8">

    </td>
    <td id="v9">

    </td>
  </tr>
  <tr id="vol2">
    <td id="t1">
    </td>
    <td id="t2">

    </td>
    <td id="t3">

    </td>
    <td id="t4">

    </td>
    <td id="t5">

    </td>
    <td id="t6">

    </td>
    <td id="t7">

    </td>
    <td id="t8">

    </td>
    <td id="t9">

    </td>
  </tr>
</table>

CSS

table {
  width: 100%;
  
}
#vol td, #vol2 td {
  text-align: center;
  height: 30px;
}

JavaScript

Ouvertures = {v1 : 50 ,
						 v2 : 30,
             v3 : 25,
             v4 : 80,
             v5 : 15,
             v6 : 56.2,
             v7 : 35,
             v8 : 75,
             v9 : 16.9,} ;
             
$( function(){
t=0;
 $.each(Ouvertures, function(idx, op){
    $("#"+idx ).css("background-image", "linear-gradient(to right, green "+op+"%, red 0%)").html(op+"%");
   $("#t"+ ++t).css("background-image", "linear-gradient(to top, green "+op+"%, red 0%)").html(op+"%"); 
    
    
 
 })
 })