[Dilettante_Pro]

Sergey and,

<style>
  td { position:relative;
        width:40px;
        padding: 0px;     
 }
  td div.back {position:absolute;
         left:0px;
         top:0px;
         height:100%;
         background-color:red;
         z-index:-1;
  }

</style>
<table border="1px">
  <tr>
    <td><div class="back"></div>0%</td>
    <td><div class="back"></div>25%</td>
    <td><div class="back"> </div>50%</td>
    <td><div class="back"></div>75%</td>
    <td><div class="back"></div>100%</td>
  </tr>
</table>
<script>
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length;i++) {
     arr[i].firstChild.style.width = arr[i].innerText;
  }
</script>