How can I display progress bar as table row background?

Question

I have a table like this:

th1    th2    th3    th4    th5    th6
td1    td2    td3    td4    td5    td6
td1    td2    td3    td4    td5    td6

New table rows are added with a form above that runs a background process to calculate all the data in each td. The process can take 10-60 seconds.

Rather than a separate column that displays progress, I'd like to shade the background of the entire tr as it corresponds to the % completion of the calculation process.

For example:

th1    th2    th3    th4    th5    th6
$ 1    $ 2    $ 3    $ 4    $ 5    $ 6   [100% done, 100% of row shaded light green]
$ -    $ -    $ -    $ -    $ -    $ -   [ 40% done,  40% of row shaded light green]

Background only:

th1    th2    th3    th4    th5    th6
||||||||||||||||||||||||||||||||||||||   [100% done, 100% of row shaded light green]
|||||||||||||||                          [ 40% done,  40% of row shaded light green]
|||||||||                                [ 25% done,  25% of row shaded light green]
||||                                     [ 10% done,  10% of row shaded light green]

What do you recommend?

Here's some general markup:

<table>
    <thead>
        <tr><th>th1</th><th>th2</th><th>th3</th><th>th4</th><th>th5</th><th>th6</th></tr>
    </thead>
    <tbody>
        <tr data-progress="100"><td>$1</td><td>$2</td><td>$3</td><td>$4</td><td>$5</td><td>$6</td></tr>
        <tr data-progress="40"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
        <tr data-progress="25"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
        <tr data-progress="10"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
    </tbody>
</table>

Answer 1

For my solution you need an extra div in the first td of each tr but it looks pretty cool. Still needs some improvements but you get the idea...

DEMO http://jsfiddle.net/CBJjv/2/

Call this function after updating data-progress values.

var updateProgress = function () {
    var trs = document.querySelectorAll('.table-body tr');
    for (var i=0; i<trs.length; i++) {
        var tr = trs[i];
        var pr = tr.querySelector('.progress');
        pr.style.left = (tr.dataset.progress - 100)+'%';
        pr.style.height = tr.clientHeight + 'px';
    }
}

Instead of playing with the position, you could also have a fixed position and modify the width of the div

Works in Chrome, not tested in other browsers.