CSS: gradienty powtarzające się w Chrome, gdy ustawione na tbody/thead

Question

Problem, który mam, jest pokazany tutaj. Zasadniczo, kiedy umieszczam gradient na thead, Chrome powtarza ten gradient na zawsze w komórce ... Rzeczywistym pożądanym wynikiem jest to, co wyprodukował firefox - solidny gradient dla całego theada.

Wszelkie pomysły jak to naprawić?

Oto css mam:

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

Oto html czy to pomaga:

<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

dobrze, sposobem ominięcia Problem polega na tym, aby nie używać oddzielnych komórkach, i zamiast tego użyj <br />.

Zdaję sobie sprawę, że to nie jest dobra poprawka.

Kod: http://jsbin.com/ozuhi5

Kod z fix: http://jsbin.com/ozuhi5/2

New <thead>:

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

Answer 2

wierzę, że to dlatego, że styl background nie mogą być stosowane do elementu thead.

Answer 3

Jest to niefortunne problem, ale istnieje proste obejście, które będą pracować dla większości układów:

Ustaw gradient na samym stole, i dać <td> s umaszczenie.

skrzypce: http://jsfiddle.net/vudj9/

Answer 4

Stosowanie gradientu do elementu zamiast theadth i stosując selektor atrybutu rowspan wydaje się działać. Nie zadziałałoby to tak dobrze, gdyby wysokość dwóch rzędów nagłówka była elastyczna, ponieważ w tym przykładzie trzeba znać średni zakres koloru #7E7E7E. Checkout 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

Jeśli dasz THEAD wartości display: table-caption; to działa.

Potrzebuje trochę dodatkowego CSS do pozycjonowania zawartości th.

http://jsfiddle.net/4vnpC/

Answer 6

Jest to bug Google Chrome przeczytać więcej na ten temat na this Google page about issues on Chrome.

mam ten sam problem podczas próby stylizacji element TBODY, jest to rozwiązanie używam naprawić mojego kodu bez przerywania innych przeglądarek wspierać:

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

Zobacz demo na ten Fiddle

Answer 7

Ustaw background-attachment:fixed; na thead i będzie działał dobrze