Applicazione di un gradiente di sfondo singolo a una riga della tabella

Question

È possibile avere un gradiente di sfondo che si estende su un'intera riga della tabella? Sono in grado di applicare lo sfondo solo alle singole celle della tabella, anche quando cerco specificamente di impedirlo. Ecco un esempio bollito-down che gli obiettivi di Webkit su jsfiddle:

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

Come potete vedere, sto usando border-collapse:collapse e sto specificando background:transparent per gli elementi <tr> e <th> bambino, ma il gradiente rosso al sinistra viene ripetuta per ogni cella della tabella. Ho provato ad applicare lo sfondo allo <tr>, ma con lo stesso risultato che vedi ora.

Per visualizzare il codice senza andare a jsfiddle, eccolo:

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

impostato background-attachment:fixed; su thead e funzionerà benissimo

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

Answer 2

non è la soluzione più bella, ma fa fare il trucco. È sufficiente impostare ogni th per avere il 25% dell'intervallo di colori. L'esempio che segue usa una gamma di colori da 0 a 255.

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

Stesso HTML che hai già. Ecco il 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%); 
} 

ho trovato questo problema in Google: http://code.google.com/p/chromium/issues/detail?id=122988 ma non c'è soluzione.

Firefox non ha questo problema (non controllare qualsiasi altro browser):
http://jsfiddle.net/cGV47/4/

Answer 3

penso che ci sia una soluzione migliore per questi:

• Applicare il gradiente di sfondo a tutta la tavolo.
• Quindi applicare uno sfondo solido per il filo e il cerchio.

table { border:0; border-collapse:collapse; 
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(108,211,229,0.2) 40%, rgba(108,211,229,0.2) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(108,211,229,0.2)), color-stop(60%,rgba(108,211,229,0.2)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* IE10+ */ 
    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(108,211,229,0.2) 40%,rgba(108,211,229,0.2) 60%,rgba(255,255,255,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 */    
} 

table thead, tfoot { 
    background: #fff; 
} 

Date un'occhiata: http://jsfiddle.net/5brPL/

Answer 4

mi sono trovato testare il nuovissimo repeating-linear-gradient, che apparentemente funziona per gli elementi <tr> (ne ho solo testato in Google Chrome però).

Il trucco è fornire il modello ripetuto più largo, in modo che ... non si ripeta.

Prova questa:

tr { 
    background: repeating-linear-gradient(
     45deg, 
     red 0%, 
     blue 100% 
    ); 
} 

http://jsfiddle.net/slyy/2pzwws0d/