静态进度条作为表格单元格的背景答案

【问题标题】：Static progress bar as background of table cell静态进度条作为表格单元格的背景
【发布时间】：2009-12-19 16:23:49
【问题描述】：

有谁知道将行或单元格的背景设置为“进度条”的最佳方法。例如，如果“使用百分比”单元格值为50%，则条形填充行或单元格背景的一半：

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

我正在使用 PHP 生成表格，所以也许我可以在单元格中使用单色图像并设置 img 的宽度。我如何让单元格的文本位于顶部？我怎么知道文本是否使列变宽...我必须使用固定的列宽吗？

Javascript 会更好，因为它能够检测列的呈现宽度吗？

编辑：只是为了澄清一下，进度不会实时改变......只是在页面加载时。

【问题讨论】：

标签： javascript php progress-bar

【解决方案1】：

这应该很容易在没有 javascript 的情况下完成，因为宽度设置为百分比，所以你有什么表格宽度并不重要：

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

【讨论】：

【解决方案2】：

我想你可以在 td 上设置背景颜色和背景图像，其中背景颜色是进度条“填充”部分所需的颜色，图像是 1x1 像素图像未填充部分所需的颜色。将背景图像设置为重复并将其位置设置为 0 xx%，其中 xx 是您希望填充进度条的程度。

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

【讨论】：

【解决方案3】：

现在我们有了 CSS3：

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

【讨论】：

【解决方案4】：

如果 CSS 可以接受，Ben Ogle 有一个很好的解决方案：Simple CSS shiny progress bar technique。

【讨论】：

“网站暂时禁用”

【解决方案5】：

在 HTML 中（我使用 twig，但你可以理解）：

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

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

【讨论】：