CSS: i gradienti che si ripetono in Chrome quando impostati su tbody/thead

Question

Il problema che sto avendo è mostrato qui. Fondamentalmente quando metto un gradiente su un thead, Chrome ripete quel gradiente per sempre in cella ... Il risultato desiderato è quello che ha prodotto il firefox: un gradiente solido per l'intero thead.

Tutte le idee su come risolvere questo problema?

Ecco il css ho:

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

Ecco il codice html se aiuta:

<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

Beh, un modo per aggirare il problema è di non usare celle separate, e usare invece <br />.

Mi rendo conto che questa non è una soluzione molto buona.

tuo codice: http://jsbin.com/ozuhi5

il codice con correzione: http://jsbin.com/ozuhi5/2

Nuovo <thead>:

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

Answer 2

Credo che sia perché lo stile background non può essere applicato all'elemento thead.

Answer 3

Questo è un problema sfortunato, ma non v'è un semplice lavoro-around che lavorerà per la maggior parte dei layout:

impostare il gradiente sul tavolo stesso, e dare il <td> s un colore solido.

violino: http://jsfiddle.net/vudj9/

Answer 4

Applicando il gradiente all'elemento invece del theadth e utilizzando il selettore di attributo rowspan sembra funzionare. Questo non funzionerebbe molto bene se l'altezza delle due righe di intestazione fosse flessibile, in quanto è necessario conoscere il colore della gamma media #7E7E7E nell'esempio. Checkout l'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

Se si dà il thead un valore di display: table-caption; funziona.

Richiede alcuni CSS aggiuntivi per il posizionamento del contenuto di th.

http://jsfiddle.net/4vnpC/

Answer 6

Si tratta di un bug su Google Chrome Per saperne di più su this Google page about issues on Chrome.

io ho lo stesso problema quando si cerca di styling l'elemento tbody, questa è la soluzione che uso per risolvere il mio codice senza rompere gli altri browser supporta:

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 */ 
} 

vedere la demo su questo Fiddle

Answer 7

Impostare background-attachment:fixed; su thead e funzionerà correttamente