CSS: Pendientes que se repiten en Chrome cuando se establece en tbody/thead

Question

El problema que tengo se muestra aquí. Básicamente, cuando coloco un degradado en un punto, Chrome repite ese gradiente para siempre ... El resultado real deseado es lo que produjo Firefox: un gradiente sólido para todo el tema.

¿Alguna idea sobre cómo solucionar este problema?

Aquí es el css que tengo:

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

Aquí es el html si ayuda:

<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

Bueno, una forma para eludir el problema es no utilizar celdas separadas, y para usar <br /> en su lugar.

Me doy cuenta de que esta no es una solución muy buena.

Su código: http://jsbin.com/ozuhi5

su código con arreglo: http://jsbin.com/ozuhi5/2

Nueva <thead>:

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

Answer 2

creo que es porque el estilo background no se puede aplicar al elemento thead.

Answer 3

Este es un problema desafortunado, pero hay una sencilla solución alternativa que funcione para la mayoría de los diseños:

Establecer el gradiente en la propia mesa, y dar a los <td> s un color sólido.

violín: http://jsfiddle.net/vudj9/

Answer 4

Aplicando el gradiente con el elemento en lugar del theadth y utilizando el selector de atributos rowspan parece funcionar. Esto no funcionaría tan bien si la altura de las dos filas de encabezado fuera flexible, ya que necesita conocer el color de rango medio #7E7E7E en el ejemplo. Partida de los 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

Si le das la culata en T un valor de display: table-caption; funciona.

Necesita CSS adicional para el posicionamiento del contenido th.

http://jsfiddle.net/4vnpC/

Answer 6

Es un error en Google Chrome leer más sobre esto en this Google page about issues on Chrome.

tengo el mismo problema cuando se trata de peinar el elemento tbody, esta es la solución que utilizo para arreglar mi código sin romper otros navegadores apoyan:

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

Ver la demo en este Fiddle

Answer 7

Establezca background-attachment:fixed; on thead y funcionará bien