HTML/CSS两种背景色和表td中居中的文本

我有一张桌子，其中一张带有文本的

应该是两种颜色的。经过一些研究，我发现了一个包含4个

元素的方法，但它与其他字段看起来并不完全一样

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

-方法：

<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>

行动3.1

那么，有没有更好或恰当的方法来处理这个问题呢

---

下面是完整的代码示例：

您可以使用

渐变

属性执行此操作：

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%);
}

---

您能发布所需结果的屏幕截图吗……您知道CSS3背景渐变属性吗？这是可能的。唯一的缺点是很多浏览器，尤其是低于9的IE不支持它。你需要的场景截图？我需要用这个代码至少支持IE7@ShailenderArora：我希望

看起来与上面的单元格完全一样，但是有两种颜色的背景。事实上，

渐变

-属性令人难以置信。但我需要向后兼容至少IE7和其他类似版本的普通浏览器。