CSS：tbody/theadに設定するとChromeでグラデーションが繰り返されます

Question

問題は私がここに示しています。基本的に、私がtheadにグラデーションを置くと、Chromeはそのグラデーションをセルのために繰り返します...実際の望みの結果は、firefoxが作り出したものです - thead全体のための堅実な勾配です。

この問題を解決する方法上の任意のアイデア？ここで

は、私が持っているCSSです：それは場合に役立ちます。ここ

thead.header { 
    font-weight: bold; 
    border-bottom: 1px solid #9C9C9C; 
    background-repeat: no-repeat; 
    background: #C6C6C6; 
    background: -moz-linear-gradient(top, #DEDEDE 0%, #BDBDBD 80%, #BBB 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DEDEDE), color-stop(80%,#BDBDBD), color-stop(100%,#BBB)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DEDEDE', endColorstr='#BBB',GradientType=0); 
} 

はhtmlです：

<table style="width:100%" cellpadding="0" cellspacing="0"> 
    <thead class="header"> 
     <tr> 
     <th width="200px">Actor</th> 
     <th rowspan="3">Character</th> 
     </tr> 
     <tr> 
     <th>Gender</th> 
     </tr> 
     <tr> 
     <th>Age</th> 
     </tr> 
    </thead> 

    <tbody class="odd"> 
     <tr> 
     <td width="200px">Test</td> 
     <td rowspan="3">Test</table> 
     </td> 
     </tr> 
     <tr> 
     <td>Male</td> 
     </tr> 
     <tr> 
     <td>25</td> 
     </tr> 
    </tbody> 
    </table> 

Answer 1

まあを、に問題を回避するの方法は、別々のセルを使用しないことです、代わりに<br />を使用してください。

私はこれが非常に良い解決ではないことを認識します。

あなたのコード：修正とhttp://jsbin.com/ozuhi5

あなたのコード：http://jsbin.com/ozuhi5/2

新<thead>：

<thead class="header"> 
    <tr> 
    <th width="200"> 
     Actor<br /> 
     Gender<br /> 
     Age 
    </th> 
    <th>Character</th> 
    </tr> 
</thead> 

Answer 2

私はbackgroundスタイルがthead要素に適用することができないので、それはだと信じています。

Answer 3

これは不幸な問題ですが、ほとんどのレイアウトのために動作します簡単な回避策があります：

は、テーブル自体に勾配を設定し、<td> sでソリッド色を与えます。

フィドル：http://jsfiddle.net/vudj9/

Answer 4

ではなくtheadのth要素にグラデーションを適用し、rowspan属性セレクタを使用しては動作するようです。この例では、中間範囲の色#7E7E7Eを知る必要があるので、2つのヘッダー行の高さが柔軟であれば、これはうまく機能しません。あなたはそれが動作display: table-caption;のthead要素値を与えるとexmaple http://jsfiddle.net/wSWF9/2/

table { 
     border: 1px solid #ccc; 
     border-collapse: collapse; 
    } 

    table thead th[rowspan="2"] { 
     background-image: linear-gradient(to bottom, #ccc, #333); 
     background-image: -webkit-linear-gradient(top, #ccc, #333); 
     background-repeat: repeat-x; 
    } 

    table thead tr th { 
     background-image: linear-gradient(to bottom, #ccc, #7E7E7E); 
     background-repeat: repeat-x; 
    } 

    table thead tr + tr th { 
     background-image: linear-gradient(to bottom, #7E7E7E, #333); 
     background-repeat: repeat-x; 
    } 

Answer 5

をチェックアウト。

コンテンツをthに配置するには、CSSを追加する必要があります。

http://jsfiddle.net/4vnpC/

Answer 6

それはGoogleのクロームのバグがthis Google page about issues on Chromeにそれについての詳細を読みました。

table>tbody { 
    background-image: -moz-linear-gradient(270deg, black, white); /* keep the right code  for other browsers */ 
    background-image: -ms-linear-gradient(270deg, black, white); 
    background-image: -o-linear-gradient(270deg, black, white); 
    background-image: linear-gradient(to bottom, black, white); 

    background-color: transparent; /* needed for chrome*/ 
    background-image:-webkit-linear-gradient(0deg, rgba(0,0,0,0),rgba(0,0,0,0)); /*del the linear-gradient on google chrome */ 
} 
table { /*fix tbody issues on google chrome engine*/ 
    background-image: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 39px, black 0px,white); /* 359px is the calculated height of the thead elemx */ 
    border-spacing: 0; /*delete border spacing */ 
} 

このFiddle

Answer 7

でデモを参照してください：私はTBODY要素をスタイリングしようとしている同じ問題を持っています

は、これは私が他のブラウザを壊すことなく、自分のコードを修正するために使用するソリューションをサポートしています

theadにbackground-attachment:fixed;を設定すれば正常に動作します