Static progress bar as table cell background

Question

Does anyone know a better way to set the background of a row or cell as a progress bar. For example, if the cell value used by the percentage is equal 50%, the bar fills half the background of the row or cell:

╔══════════════════════════════════════════════════════════╗
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░78%░░░░░░░░░░░░░░░          ║
╚══════════════════════════════════════════════════════════╝

I use PHP to create a table, so maybe I could use a single color image in a cell and set the width to img. How can I get cell text to sit on top? How can I find out if the text has expanded the column width ... would I have to use fixed column widths?

Will Javascript be better, since it will be able to determine how wide the columns were displayed as?

EDIT: To clarify, progress does not change in real time ... only when the page is loaded.

Answer 1

This should be pretty easy to do without javascript, since the width is set as a percentage, no matter what your table width is:

<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>

Answer 2

I assume that you can set the background color and background image to td, where the background color is the color you want for the “filled” part of the progress bar and the image is a 1x1 pixel image with the color you want for the blank part. Set the background image to repeat and set it to 0 xx%, where xx is how much you want the progress bar to be filled.

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

Answer 3

, CSS3:

td {
   background-image: url('images/1pxGreen.png');
   background-repeat: no-repeat;
   background-size:50% 100%;
}

Answer 4

CSS , Ben Ogle : CSS.

Answer 5

In HTML (I use a branch, but you can get this idea):

<td class="text-right pie-progress pie-progress-share{{ (count/totalCount)|round }}">{{ count }}</td>

In CSS:

td.pie-progress {
    position: relative;
}
td.pie-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #66afe9;
    z-index: -1;
}
td.pie-progress-green::before {
    /* example of other color */
    background-color: #66af66;
}
td.pie-progress.pie-progress-share1::before {width: 1%;}
td.pie-progress.pie-progress-share2::before {width: 2%;}
...
td.pie-progress.pie-progress-share100::before {width: 100%;}