Two Color Table Cell Background

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,

Solution 1:

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>

Solution 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><tdclass="halfnhalf"><span>Testing</span></td></tr></table>

If you need any further demonstration let me know and I'll set up a jsfiddle.

Solution 3:

I'd suggest you using trick with border or another with pseudoelement described here: fill div with 2 colors?

or simplier: just make two divs in that TD with different background colors.