两个颜色表细胞背景 [英] Two color table cell background

问题描述

如何制作（仅使用CSS，无bg图像）html表格单元格（TD标签），左侧为红色，右侧为绿色。我不想要两个单元格，只有一个td单元格用CSS定义的双色背景。

How to make (using only CSS, without bg image) html table cell (TD tag) having left half bacground in red color and right half background in green color. I do not want two cells, just one td cell with two-color background defined by CSS.

推荐答案

我使用CSS渐变概念。这里，第一颜色从0开始并以50％结束，而第二颜色从51％开始并以100％结束。因此，可以为每种颜色分配比率。

I have used CSS gradients concept. Here the first color starts from 0 and ends at 50% while the second color starts at 51% and ends at 100%. Thus it is possible to assign ratio to each color.

td {
  background: linear-gradient(to right, tomato 50%, lightgray 51%);
}

<table>
  <tr>
    <td>
      Two Color Background
    </td>
  </tr>
</table>

这篇关于两个颜色表细胞背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！