[Dilettante_Pro]

без дивов

<style>
  td { position:relative;
        width:20px;
        height:10px;
        padding: 0px;
  }
 
</style>
Процент<input type='text'/>
<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
<script>
document.querySelector('input').onchange = function() {
  var percent = +this.value;
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length ;i++) {
     arr[i].style.backgroundColor = "white";
  }
  for(var i = 0;i < ((arr.length * (percent - 5)) / 100) ;i++) {
     arr[i].style.backgroundColor = "red";
  }
}
</script>