JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tableau">
    <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>
          <div class="volet" id="v1">
          </div>
        </td>
        <td>
          <div class="volet" id="v2">
          </div>
        </td>
        <td>
          <div class="volet" id="v3">
          </div>
        </td>
        <td>
          <div class="volet" id="v4">
          </div>
        </td>
        <td>
          <div class="volet" id="v5">
          </div>
        </td>
        <td>
          <div class="volet" id="v6">
          </div>
        </td>
        <td>
          <div class="volet" id="v7">
          </div>
        </td>
        <td>
          <div class="volet" id="v8">
          </div>
        </td>
        <td>
          <div class="volet" id="v9">
          </div>
        </td>
      </tr>
    </table>
  </div>

CSS

#tableau table { width:100%;}
#vol td{ 
 background-color: red;
 height: inherit;
 border:0;
 padding:0;
 margin:0;
 }
.volet { 
  height: 100%;
 border: 1px solid green; 
 background-color: green;}

JavaScript

Ouvertures = {v1 : 50 ,
						 v2 : 30,
             v3 : 25,
             v4 : 80,
             v5 : 15,
             v6 : 56.2,
             v7 : 35,
             v8 : 75,
             v9 : 16.9,} ;
             
$( function(){
 $.each(Ouvertures, function(idx, op){
    $("#"+idx ).html("&nbsp").css("width", op +"%")
    
 
 })
 })