css - 表の行に単一の背景グラデーションを適用する

Question

表の行全体に背景グラデーションを適用することはできますか? 特にそれを防止しようとしている場合でも、個々の表のセルにのみ背景を適用できます。以下は、jsfiddle で Webkit を対象とする簡単なサンプルです。

http://jsfiddle.net/cGV47/2/

ご覧のとおり、との子要素を使用border-collapse:collapseして指定background:transparentしていますが、左側の赤いグラデーションがテーブル セルごとに繰り返されています。にも背景を適用しようとしましたが、今と同じ結果になりました。<tr><th><tr>

jsfiddle に移動せずにコードを表示するには、次のようにします。

html

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>un</td>
            <td>deux</td>
            <td>trois</td>
            <td>quatre</td>
        </tr>
    </tbody>
</table>

CSS

* {margin:0;padding:0;border:0;border-collapse:collapse;}
table { width:100%; }
thead { background: -webkit-linear-gradient(left, rgba(222,22,22,1) 0%, rgba(222,222,222,0) 20%, rgba(222,222,222,0) 80%, rgba(222,222,222,1) 100%); }
thead tr, thead th { background:transparent; }

Answer 1

background-attachment:fixed;thead に設定すると正常に動作します

http://jsfiddle.net/cGV47/64/

Answer 2

最も美しい解決策ではありませんが、うまくいきます。th色範囲の 25% を持つようにそれぞれを設定するだけです。以下の例では、0 から 255 までの色範囲を使用しています。

http://jsfiddle.net/cGV47/3/

既に持っているものと同じ HTML。CSSは次のとおりです。

table { width:100%; }

th {
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, 
                                              rgba(191,191,191,1) 100%);
}
th + th {
    background: -webkit-linear-gradient(left, rgba(191,191,191,1) 0%, 
                                              rgba(128,128,128,1) 100%);
}
th + th + th {
    background: -webkit-linear-gradient(left, rgba(128,128,128,1) 0%, 
                                              rgba(64,64,64,1) 100%);
}
th + th + th + th {
    background: -webkit-linear-gradient(left, rgba(64,64,64,1) 0%, 
                                              rgba(0,0,0,1) 100%);
}

Google でこの問題を見つけました: http://code.google.com/p/chromium/issues/detail?id=122988しかし、解決策はありません。

Firefox にはこの問題はありません (他のブラウザーは確認していません):
http://jsfiddle.net/cGV47/4/