How can I color a square div with two colors?

Question

I have a table like this:

<table class="lugares">
    <tr>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
        <td class="seat-not-avaliable"><div></div></td>
        <td class="seat-badvis"><div></div></td>
        <td class="seat-avaliable"><div></div></td>
    </tr>
</table>

There is a "seat-not-available" with background black, seat-available with green background and I want to add a seat (seat-badvis) with two colors, half black and half white. I tried with :after and :before but it doesn't work.

Here's the fiddle with my code:

http://jsfiddle.net/g8p9pn1v/38/

Answer 1

You might want to use linear-gradient:

.seat-badvis div {
    background: linear-gradient(90deg, #5e6461 50%, white 50%);
}

Here is a fiddle with background so it's easier to see the difference -> jsfiddle

Check browser compability if you're targeting older browsers compability table

Answer 2

You don't need to use pseudo-selectors here, use linear-gradient instead:

background: linear-gradient(to right, #fff 50%,#000 50%);

Here's a fiddle: http://jsfiddle.net/dbbtxL50/