16

我的 CSS 很糟糕，我需要为我完成一些复杂的事情。

我有一个包含数据的表格，我有一列我有类似的东西Qty Assigned / Qty Requested。我计算分配的百分比，因此分配的 10 个中的 5 个将是 50%。现在，我想在TD匹配 %. 所以 50% 将是 TD 的一半，比如说红色。

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

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

4

4 回答 4

15

你可以用linear-gradient这个

例如，如果您需要 50% 的红色

td {
  background: linear-gradient(to right, red 50%, transparent 0);
}

演示：

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 10px;
}

.half {
  background: linear-gradient(to right, red 50%, transparent 0);
}

.one-third {
  background: linear-gradient(to right, red 33.33%, transparent 0);
}

.three-quarters {
  background: linear-gradient(to right, red 75%, transparent 0);
}
<table>
  <tr>
    <td class="half">50%</td>
  </tr>
  <tr>
    <td class="one-third">33%</td>
  </tr>
  <tr>
    <td class="three-quarters">75%</td>
  </tr>
</table>

有意使用零0秒值以避免重复第一个值。这是有效的，因为梯度中的下一个值不能小于上一个。

于 2016-12-04T12:47:11.953 回答
5

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

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

这是 twitter 引导示例：

http://cssdeck.com/labs/twitter-bootstrap-progress-bars

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

一个基本的实现示例：

<div style="width:50%">
    <div style="width: 50%; background-color:red; text-align:center">Hello</div>
</div>
于 2012-07-31T19:20:20.900 回答
4

正如评论中所建议的，我在将单个像素拉伸到表格单元格background-image的适当百分比方面取得了很好的成功。background-size这适用于所有现代浏览器 (IE9+)。

div这具有独立于您可能想要应用于表格单元格的任何其他样式的优点（超过使用附加元素来包含“彩色条”），例如text-align等。它自然会出现在单元格内容和弯曲的后面如果使用百分比来填充表格单元格。

CSS：

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

HTML：

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

$perc你计算的百分比在哪里。

于 2014-06-08T18:50:40.820 回答
0

我会在你想要效果的div每个 s 中放置一个红色的s 。td然后使用jQuery获取里面的数字（字符串）td并将其变成一个变量，然后您可以使用它来设置div.

于 2012-07-31T19:20:30.517 回答