CSS/Webkit: immagini di sfondo per riga tabella

Question

Per qualche motivo quando si applica un'immagine di sfondo a una tr in Safari/Chrome, la esegue come se la regola fosse valida per ogni td.

Firefox:

Firefox http://www.whyprime.com/temp/table-firefox.png

Safari:

Safari http://www.whyprime.com/temp/table-safari.png

Ho trovato questo articolo che discute una correzione:

http://snook.ca/archives/html_and_css/applying_a_back

Sono riuscito a farlo funzionare in IE con le immagini spaziali ma non riesco a capirlo per Safari.

http://www.whyprime.com/temp/table-background.html

Answer 1

sarà il vostro tavolo sempre avere solo 2 file? Come ad esempio:

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

Se è così, una soluzione semplice ma non eccessivamente elegante, potrebbe essere quella di dividere l'immagine di sfondo in due immagini, e applicare una classe CSS alla colonna di sinistra e destra, applicando la metà della freccia per il lato destro della colonna di sinistra, e sul lato sinistro della colonna di destra:

<table> 
    <tr> 
    <td class="left"></td> 
    <td class="right"></td> 
    </tr> 
</table> 

tuo CSS potrebbe quindi essere simile a:

td.left 
{ 
    background: #ffffff url(../PathToLeftBackground.png) top right; 
} 
td.right 
{ 
    background: #fffff url(../PathToRightBackground.png) top left; 
} 

si potrebbe anche usare un'immagine sprite in cui si usa 1 immagine e posizionala diversamente per i due sfondi.

Mi rendo conto che probabilmente non è la soluzione ideale, ma risolverebbe almeno il problema e farà muovere il progetto. A volte uso soluzioni semplici come questa per far progredire i progressi e quindi rivisitare il problema per renderlo più efficiente in seguito.

Spero che questo aiuti!

Answer 2

Per impostazione predefinita, TR e TD hanno proprietà di visualizzazione tabella-cella e tabella-riga. Abbiamo bisogno di loro di non pensarci più e si sentono come elementi di blocco semplici:

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

Questo codice ha risolto il problema di rendere per me.

Answer 3

è un po 'in ritardo ma, è possibile utilizzare "background-attachment: fixed" per risolvere questo problema.

<table> 
    <tr class="bg"> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

e nei CSS

tr.bg { 
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px; 
    background-attachment: fixed; 
} 

e funziona!