CODEWITHSUNDEEP
csstextcolorsbackgroundhtml-table
DanielK
DanielK

Reputation: 422

HTML/CSS two background colors and centered text in table td

I have a table, where one <td> with text should be two-coloured. After some research, I found a method with 4 <div> elements, but it doesn't look exactly like the other fields.

<iframe width="100%" height="300" src="http://jsfiddle.net/tG5n3/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

The <div>-Method:

<td style="width: 90px;">
    <div style="position: relative; height: 24px;">
         <div style="position: relative; z-index: 1; top: 20%;">Action 3.1</div>
         <div style="position: absolute; top: 0; bottom: 0; left: 0; background: lightgreen; width: 50%;"></div>
         <div style="position: absolute; top: 0; bottom: 0; right: 0; background: white; width: 50%;"></div>
    </div>
</td>

So is there a way to handle this problem better or proper?

Here is the full code example: http://jsfiddle.net/tG5n3/

Upvotes: 0

Views: 1079

Answers (1)

Sourabh
Sourabh

Reputation: 8482

You can use gradient property to do this:

td.two-color {
    background-image: -webkit-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:    -moz-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:     -ms-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:      -o-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:         linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
}

DEMO

Demo with half white

Upvotes: 1

Related Questions