Question

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你走了：

＆＃13;

td.halfnhalf {
  position: relative;
  background: green;
}
td.halfnhalf > span{
   position:relative;
}

td.halfnhalf:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  background: red;
}

＆＃13;

<table>
  <tr>
    <td class="halfnhalf"><span>Testing</span></td>
  </tr>
</table>

＆＃13;

如果您需要任何进一步的演示让我知道，我会设置一个jsfiddle。

Answer 3

我建议您使用带边框的魔术或其他带有伪元素的技巧： fill div with 2 colors?

或更简单：只需在TD中使用不同的背景颜色制作两个div。

两种颜色表细胞背景

3 个答案: