Question

我希望在一个tablecell中有一个水平条带，这样它的左边是一种颜色（比方说是蓝色）而右边的是另一种颜色（比方说是红色）。现在，当我说左右时，我并不是指正好一半，实际上应该着色为蓝色/红色的条带百分比取决于其他一些数据（可以轻松访问任何脚本文件），它可以更改每个tablecell。我的困境如下：

我想我应该在tablecell中使用2个div。我可以在css中设置颜色并在脚本中设置它们的宽度。但是我不确定如何将表格单元格中的div对齐以获得水平条带，所以我需要完全针对div的css应该是什么样的建议。也许我可以使用span元素而不是div？最后也许不是所有这些，着色条带图像是最好的解决方案吗？

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>

如何在tablecell中制作水平的2色条带？

1 个答案: