CSS to set the background color for just a percentage of the width of a table row

I have a basic table with two columns: name and value. I'd like to shade each row in the table an appropriate percentage of the width based on the size of the value (to essentially create a sideways histogram!). I can write code to calculate the appropriate percentage to set, but I can't figure out the CSS to actually shade each row appropriately. It seems like the whole row can be shaded, but not a percentage. Is that true?

For what it's worth, I'm using Twitter Bootstrap and I can use jQuery too if need be. This is only running on Chrome so CSS3 & Webkit only is fine! Here's the HTML:

<table class="table">
  <tbody class="lead">              
    <tr> 
      <td>
        Joe
      </td>
      <td>
        10
      </td>
    </tr>              
    <tr> 
      <td>
        Jane
      </td>
      <td>
        20 
      </td>
    </tr>              
    <tr> 
      <td>
        Jim
      </td>
      <td>
        2
      </td>
    </tr>
  </tbody>
</table>

Any tips on how to make this happen? Hope this question makes sense.