填充x％宽

Question

我不知道我想要实现的目标是否有名称。我需要创建一个如下图所示的表格。

细胞中的数字仅用于演示目的，但应该发生的是，当WT％的CO2为4.11％时，细胞应填充4.11％的蓝色 - 有点像条形图。< / p>

这是否有名称，是否有插件我可以为我做这个？

Answer 1

您可以使用jQuery在单元格中选取值并放入宽度。

考虑以下示例表。

<table>
    <tr>
        <td>A</td>
        <td><div>35<span class='progress'>&nbsp;</span></div></td>
    </tr>
    <tr>
        <td>B</td>
        <td><div>100<span class='progress'>&nbsp;</span></div></td>
    </tr>
    <tr>
        <td>C</td>
        <td><div>80<span class='progress'>&nbsp;</span></div></td>
    </tr>
</table>

在jQuery中，我们可以在单元格中选择值（在div中将其保持在进度条之外）并将该值设置为已具有背景颜色的进度条的宽度。
请检查此Fiddle

这是为了让您了解如何修改代码以实现所需。 StackOverflow中没有现成的答案。
希望这有帮助。

Answer 2

使用宽度为百分比的背景div：

.relative {
  position: relative;
}
.progress {
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}
td {
  border: 1px dotted #ccc;
  text-shadow: 0 0 2px #fff;
  padding: 4px;
  min-width: 50px;
}

<table>
  <tr>
    <td>N2</td>
    <td class="relative">
      <div class="progress" style="width:35%;"></div>35
    </td>
  </tr>
  <tr>
    <td>CO2</td>
    <td class="relative">
      <div class="progress" style="width:92%;"></div>92
    </td>
  </tr>
</table>