Question

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

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

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

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

编辑：只是为了澄清，进展并没有改变现场...只是在加载页面时。

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

Answer 2

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

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有一个很好的解决方案：Simple CSS shiny progress bar technique。

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

作为桌细胞背景的静态进展酒吧

5 个答案: