Akki619 Akki619 - 5 months ago 26
CSS Question

TD background with two colors

A quick question here,

css3 gradient
is not helping in my requirement. I need to highlight
td
with two colors, left half with one color and right half with other color.

Output should be:

enter image description here

How can I achieve that?

Answer

Do you need like this. I don't Know whether it is correct or not?

<!DOCTYPE html>
<html>
    <head>
        <style>
            table td {
                border: 1px solid black;
                background: linear-gradient( to right, #ff9e2c 0%, #ff9e2c 50%, #FF0000 50%, #FF0000 100%);
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>Feb</td>
                <td>$1000</td>
            </tr>
            <tr>
                <td>March</td>
                <td>$10</td>
            </tr>
            <tr>
                <td>April</td>
                <td>$110</td>
            </tr>
        </table>
    </body>
</html>
Comments