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

Question

我想在表格单元格中有一个水平 strip ，这样它的左侧是一种颜色(假设是蓝色)，右边是另一种颜色(假设是红色)。现在，当我说左和右时，我的意思并不完全是一半，事实上，应该被染成蓝色/红色的 strip 的百分比取决于其他一些数据(任何脚本文件都可以轻松访问)，并且它可以更改为每个表格单元格。我的困境如下:

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

Answer 1

尝试只使用没有 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>