title: CSS to set the background color for just a percentage of the width of a table row
body: <p>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?</p>
  
  <p>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 &amp; Webkit only is fine! Here's the HTML:</p>
  
  <pre><code>&lt;table class="table"&gt;
    &lt;tbody class="lead"&gt;              
      &lt;tr&gt; 
        &lt;td&gt;
          Joe
        &lt;/td&gt;
        &lt;td&gt;
          10
        &lt;/td&gt;
      &lt;/tr&gt;              
      &lt;tr&gt; 
        &lt;td&gt;
          Jane
        &lt;/td&gt;
        &lt;td&gt;
          20 
        &lt;/td&gt;
      &lt;/tr&gt;              
      &lt;tr&gt; 
        &lt;td&gt;
          Jim
        &lt;/td&gt;
        &lt;td&gt;
          2
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Any tips on how to make this happen? Hope this question makes sense.</p>