Bicolor table cell background

Question

How to make (using only CSS, without a bg image) an html table cell (TD tag), leaving half the background in red and the right half of the background in green. I don't want two cells, only one cell with a two-color background, defined by CSS.

Answer 1

I used the concept of CSS gradients. Here, the first color starts at 0 and ends at 50%, and the second color starts at 51% and ends at 100%. Thus, you can assign a relationship to each color.

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

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

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> 

If you need further demonstration let me know and I will configure jsfiddle.

Answer 3

I suggest you use a trick with a border or another with the pseudo-element described here: fill a div with two colors?

or simpler: just make two divs in this TD with different background colors.