Question

我在CSS方面非常糟糕，我需要为我完成复杂的事情。

我有一个包含数据的表格，我有一个列，其中有Qty Assigned / Qty Requested之类的内容。我计算分配的％，因此5分配的10将是50％。现在，我想在匹配％的TD上添加背景颜色。因此50％将是TD的一半，让我们说是红色。

我尝试使用background-color: red; background-size: <?php echo $BgPct; ?>%;，但它不起作用。

有人有解决方案吗？我可以用任何东西。我也有jQuery。我不在乎它是否是CSS1 / 2/3，但它需要准确，所以66％不是75％的背景图片。

Answer 1

您可以将div放在另一个div中。使两个div具有相同的高度。内部div将具有背景颜色（红色）。然后你可以将div的宽度设置为％，以及它将填充多少。

这是twitter bootstrap实现其进度条的方式。如果你想要一个垂直填充条，我认为你可以将高度设置为％并使宽度相同。

这是twitter bootstrap示例：

单击详细信息选项卡以查看源代码。

基本实现示例：

<div style="width:50%">
    <div style="width: 50%; background-color:red; text-align:center">Hello</div>
</div>

Answer 2

正如评论中所建议的那样，我在单个像素background-image上获得了成功，该像素被拉伸到表格单元格的适当百分比background-size。这适用于所有现代浏览器（IE9 +）。

这有利于（使用额外的div元素来包含“彩色条”），使其独立于您可能想要应用于表格单元格的任何其他样式，例如text-align如果使用百分比，它将自然地出现在单元格内容的后面并弯曲以填充表格单元格。

td.bargraph {
    background:transparent url(/img/dot-green.gif) 0 center no-repeat;
    text-align: center;
}

<td class="bargraph" style="background-size:<?=$perc?>% 80%"><?=$perc?>%</td>

$perc是您计算的百分比。

Answer 3

有趣的问题。我会在你想要影响的每个div内放一个td，红色。然后使用jQuery获取td中的数字（字符串）并将其变为变量，然后可以使用该变量设置div的宽度。