0

テキスト付きのテーブルは<td>2色にする必要があります。いくつかの調査の後、4 つ<div>の要素を持つメソッドを見つけましたが、他のフィールドとまったく同じようには見えません。

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

-<div>メソッド:

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

では、この問題をより適切に処理する方法はありますか?

完全なコード例は次のとおりです: http://jsfiddle.net/tG5n3/

4

1 に答える 1

1

gradientプロパティを使用してこれを行うことができます。

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

デモ

ハーフホワイトのデモ

于 2013-07-24T10:59:07.420 に答える