static progress bar as background of table cell

Question

Does anyone know the best way to set the background of a row or cell as a 'progress bar'. For example if the 'percent used' cell value is '50%' the bar fills half the background of the row or cell.

I am using PHP to generate the table, so maybe I could use a single colour image in the cell and set the width of the img. How would I get the text of the cell to sit on top? How would I know if the text had made the column wider... would I have to use fixed column widths?

Would javascript be better as it would be able to detect how wide the columns were rendered as?

EDIT: Just to clarify, the progress does not change live... just when the page is loaded.

Answer 1

I guess you could set a background-color and a background-image on the td, where the background-color is the color you want for the "filled" part of the progressbar, and the image is a 1x1 pixel image with the color you want for the non-filled part. Set the background-image to repeat and set it's position to 0 xx% where xx is how much you want the progressbar filled.

td {
   background-color: #f00;
   background-image: url('images/1pxwhite.gif');
   background-repeat: repeat;
   background-position: 0 50%;
}

Answer 2

If CSS is acceptable, Ben Ogle has a good solution: Simple CSS shiny progress bar technique.

Answer 3

This should be pretty easy to accomplish without javascript, since the width is set as a percentage, it wouldn't matter what table width you have:

<table style="width:200px; border: #777 2px solid;">
 <tr>
  <td style="background-color:#f00; height: 10px; width: <?php echo $_GET['percent'] . "%"; ?>;"></td>
  <td style="background-color:#555;"></td>
 </tr>
</table>