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

Question

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.

Answer 1

You could use linear-gradients.

If the percentage is 40%:

table{
    background: -webkit-gradient(linear, left top, right top, color-stop(40%,#F00), color-stop(40%,#00F));
    background: -moz-linear-gradient(left center, #F00 40%, #00F 40%);
    background: -o-linear-gradient(left, #F00 40%, #00F 40%);
    background: linear-gradient(to right, #F00 40%, #00F 40%);
}

Demo

So, in JavaScript,

var percentage=40,
    col1="#F00",
    col2="#00F";
var t=document.getElementById('table');
t.style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
t.style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
t.style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";

Demo

---

If you want to apply this to each row differently:

var col1="#F00",
    col2="#00F";
var els=document.getElementById('table').getElementsByTagName('tr');
for (var i=0; i<els.length; i++) {
    var percentage = Number(els[i].getElementsByTagName('td')[1].firstChild.nodeValue);
    els[i].style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";
    els[i].style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
    els[i].style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";
    els[i].style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;
}

The problem is that setting the background to the tr works well on Firefox and Opera, but on Chrome the gradient is applied to each cell.

This problem can be fixed adding this code (see https://stackoverflow.com/a/10515894):

#table td {display: inline-block;}

Demo

Answer 2

No need to use gradients. First, create a simple image file with the color that you want to shade your row with. In my case, I created a .png which is fully colored black (black.png in the example below). Now, just use the background-image and background-size properties to color the appropriate part of the row.

Example, HTML:

<table cellspacing = "0px">
    <tr class = "row"><td>Hello Hello</td><td>Bye Bye</td></tr>
</table>

CSS:

.row {
    background-color: white; /*fallback color*/
    background-image: url(black.png);
    background-size: 75% 100%; /*your percentage is the first one (width), second one (100%) is for height*/
    background-repeat: no-repeat;
    color: rgb(0, 140, 200);
    font-weight: bold;
}

Result:

Here's a simple snippet on how to automate this for your example:

var tbl = document.getElementsByClassName("table")[0];
var rws = tbl.rows;
for(var i = 0; i < rws.length; i ++) {
    var percentage = parseInt(rws[i].getElementsByTagName("td")[1].innerHTML, 10);
    rws[i].style.backgroundImage = "black.png";
    rws[i].style.backgroundSize = percentage + "%" + " 100%";
    rws[i].style.backgroundRepeat = "no-repeat";
    rws[i].style.color = "rgb(0, 140, 200)";
}

Little demo: percentage width bg color (non-gradient based).

I hope that helped!