两种颜色的表格单元格背景

Question

如何使用CSS制作具有左半部分为红色背景和右半部分为绿色背景的HTML表格单元格（TD标记），而不使用背景图片。我不想要两个单元格，只需要一个由CSS定义的具有双色背景的TD单元格。

- sbrbot

---

https://css-tricks.com/css3-gradients/ - Adam Buchanan Smith

Answer 1

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

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

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

- m4n0

Answer 2

Here you go:

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;
}

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

如果您需要进一步的演示，请告诉我，我会设置一个jsfiddle。

- MiltoxBeyond

---

我看不到左半部分的内部文本！ - sbrbot

Answer 3

我建议您使用边框技巧或在此处描述的伪元素技巧： 如何用两种颜色填充div？

或者更简单的方法：只需在该TD中创建两个具有不同背景颜色的div。

- Michal_Szulc