javascript - Static progress bar as background of table cell - Stack Overflow

admin管理员组

文章数量:1312758

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:

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

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.

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:

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

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.

• javascript
• php
• progress-bar

Share Improve this question Follow edited Jan 20, 2017 at 20:24 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 19, 2009 at 16:23 MarkMark 5,6631111 gold badges4949 silver badges6262 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

This should be pretty easy to acplish 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>

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%;
}

Now that we have CSS3:

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

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

In HTML (I use twig but you can get the 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%;}

本文标签： javascriptStatic progress bar as background of table cellStack Overflow