html - 如何在表格单元中制作水平2色条？

我希望在表格单元中有一条水平条，这样它的左侧是一种颜色（让我们说蓝色），而右侧是另一种颜色（让我们说红色）。现在，当我说左右时，并不是指一半，实际上，应该以蓝色/红色显示的带状区域的百分比取决于其他一些数据（任何脚本文件都可以轻松访问），并且它可以更改为每个表格单元格。我的困境如下：


我认为我应该在一个表格单元格中使用2 div做到这一点。我可以在CSS中设置其颜色，并在脚本中设置其宽度。但是我不确定如何在表格单元格中对齐div以获取水平条，所以我需要一些有关div的css外观的建议。也可能我可以使用span元素而不是div吗？最后也许不是所有这些，对条带图像进行着色是最好的解决方案？

最佳答案

尝试仅使用没有div的CSS。

这就是你想要的吗？

td {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(to right, red 15%, blue 15%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, red 15%, blue 15%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(to right, red 15%, blue 15%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red 15%, blue 15%); /* Standard syntax */
}

<table>
  <tr><td>gradient make two colors in each cell</td><td>defined with CSS only</td></tr>
  <tr><td>more</td><td>data</td></tr>
</table>

关于html - 如何在表格单元中制作水平2色条？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38875429/