tabella immagine di sfondo fila

Question

Eventuali duplicati:
Can we solve the table row background image problem, in chrome, in multi celled tables?

sto cercando di avere un'immagine come sfondo per la prima riga. Il problema è che lo sfondo viene applicato a ciascuna cella separatamente, non nel suo insieme. C'è un modo per aggirarlo?

http://jsfiddle.net/bumpy009/c3txj/

risultato dovrebbe essere simile a questa:

EDIT: Il problema appare solo in Safari, Opera e Chrome. Non ho ancora controllato IE.

Answer 1

Se lo si desidera su ogni riga, perché non renderlo invece lo sfondo della tabella e ripeterlo sull'asse y?

table { 
    width: 300px; 
    background-image: url('mypic.jpg'); 
    background-repeat: repeat-y; 
} 

BTW Ho testato il codice con IE9, FF12 - quelli stanno mostrando l'immagine una volta per riga. Ma Chrome 15 & Safari 5 lo sta ripetendo per ogni td.

Modifica

Dal momento che si voleva solo nella prima fila, si dovrebbe usare background-position per assicurarsi che l'immagine rimane nella parte superiore della tabella (che è di solito dove la prima riga è, vero?: P)

table { 
    width: 300px; 
    background-image: url('mypic.png'); 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

Answer 2

non so circa i vostri larghezza delle celle (sono variabili?), ma gli elementi di tabella rendono in quanto tale. Per ottenere l'effetto desiderato, hanno bisogno di essere visualizzato come qualcosa di diverso:

tr {display: block;} 
td, th {display: inline-block; background: transparent;} 

Si noterà, che ora è necessario impostare le larghezze per gli elementi TD e TH, però.

Vedere Demo.