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

Question

我想在表格单元格中有一个水平条带，这样它的左侧是一种颜色（假设是蓝色）而右边是另一种颜色（假设是红色）。现在，当我说左和右时，我的意思并不完全是一半，实际上应该着色的条带的百分比 blue/red 取决于其他一些数据（任何脚本文件都可以轻松访问），并且它可以改变每个表格单元格。我的困境如下：

我想我应该在一个表格单元格中使用 2 divs 来做到这一点。我可以在 css 中设置它们的颜色并在脚本中设置它们的宽度。但我不确定如何对齐表格单元格中的 divs 以获得水平条带，因此我需要关于 divs 的 css 应该是什么样子的确切建议。也许我可以使用 span 元素而不是 div？最后也许不是所有这些，给条带图像着色是最好的解决方案？

Answer 1

尝试仅使用 css，不使用 div。

这是你想要的吗？

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>

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

How to make a horizontal 2-colored strip in a tablecell?

html

css

tablecell