CSS/Webkit: Imágenes de fondo para la fila de tabla

Question

Por alguna razón, cuando aplica una imagen de fondo a un tr en Safari/Chrome, se representa como si la regla se aplicara a cada td.

Firefox:

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

Safari:

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

me encontré con este artículo sobre un arreglo:

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

Pude hacerlo funcionar en IE con gifs espaciadores pero no puedo descifrarlo para Safari.

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

Answer 1

para mi mesa siempre sólo tienen 2 filas? Tales como:

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

Si es así, una solución simple, pero no demasiado elegante sería dividir la imagen de fondo en dos imágenes, y aplicar una clase CSS a la columna de la izquierda y la derecha, la aplicación de la mitad de la flecha a la lado derecho de la columna de la izquierda, y hacia el lado izquierdo de la columna de la derecha:

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

Su CSS podría entonces ser similar a:

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

también puede utilizar una imagen de sprite, donde se use 1 imagen y colóquela de manera diferente para los dos fondos.

Me doy cuenta de que probablemente no sea la solución más ideal, pero al menos solucionaría su problema y pondría en marcha su proyecto. A veces uso soluciones simples como esta para avanzar y luego vuelvo a revisar el problema para hacerlo más eficiente más adelante.

Espero que esto ayude!

Answer 2

De forma predeterminada, TR y TD tienen las propiedades de visualización tabla-celda y tabla-fila. Necesitamos que se olviden de ella y se sienten como elementos de bloques simples:

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

Este código resolvió el problema de hacer por mí.

Answer 3

es un poco tarde pero, puede utilizar "background-attachment: fixed" para resolver este problema.

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

y en el CSS

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

y funciona!