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>
      <tr id="label">
        <td></td>
        <td></td>
        <td></td>
        <td>></td>
        <td></td>
        <td>></td>
        <td></td>
        <td></td>
        <td>></td>
        
      </tr>
    </table>
  </div>

CSS

#tableau table { width:100%;
table-layout:fixed;}
#vol td{ 
 background-color: red;
 height: inherit;
 border:0;
 padding:0;
 margin:0;
 }
.volet { 
  height: 100%;
 border: 1px solid green; 
 background-color: green;}
 
 #label td {
   text-align: center;
   font:  10px verdana;
 }

JavaScript

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