Error de Google Chrome con fondo tr

Question

Estoy tratando de establecer una imagen de fondo en una fila de la tabla, pero el fondo se aplica a todos sus hijos td.

En Internet Explorer 7 no es el mismo error pero se soluciona con

tr { 
    position: relative; 
} 

Cualquier sugerencia al respecto?

Gracias

Answer 1

Ésta es la única solución que conozco sin necesidad de utilizar JavaScript. Tiene el inconveniente de que usted especifica la altura del TR y el TD, porque el TR está posicionado de manera absoluta. Tampoco estoy seguro de cómo se comportará en otros navegadores.

<style> 
    tr { 
     position: absolute; 
     background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat; 
     height: 200px; 
     border: 1px solid #00f; 
    } 
    td { 
     width: 200px; 
     height: 200px; 
     border: 1px solid #f00; 
    } 
</style> 

<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Answer 2

Esto funciona para mí en todos los navegadores:

tr { 
background: transparent url(/shadow-down.gif) no-repeat 0% 100%; 
display: block; 
position: relative; 
width: 828px; 
} 

tr td{ 
background: transparent; 
} 

Answer 3

Chrome (WebKit) anula la posición: relativa de filas de la tabla y calcula el estilo a la electricidad estática. Error o característica: esto evita la posición: arreglo relativo como se usa en IE7.

solución cuando se utiliza (conocidos) tamaños de celda fijos: tr { flotador: dejó; }

Y añada los tamaños de celda adecuados a todas las celdas de la tabla (ya sea por clase o por estilos en línea). También agregué tamaños de fila, sin embargo, puede que no sea necesario para que la solución funcione.

No necesito una solución para los tamaños de celda dinámicos, así que no he estado explorando ese uso.

Answer 4

Recomiendo establecer directamente la imagen de fondo para las celdas de la tabla, desplazando la posición de fondo de todas las celdas siguientes hacia la izquierda para que se vea como debería. De esta manera, no tiene que cortar su imagen de fondo.

Answer 5

En la etiqueta de estilo tr incluye Style='Display:inline-table;' Funciona bien en todos los navegadores.

Answer 6

Lo que terminé haciendo fue:

table.money-list tr { 
background: url(images/status-2.gif) no-repeat; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 

    /*Chrome CSS here*/ 
    table tbody tr td:first-child { 
    background-image: none; 
    background-color: transparent; 
} 

table tr td{ 
    background-color: #FFFFFF; 
} 
} 

Así como se puede ver, acaba de establecer un color de fondo a cada TD pero el primero, y Webkit objetivo.

Answer 7

Aquí está mi solución jQuery. Es para un juego de terror, pero también debería funcionar para tbody tr's.

$(document).ready(function() { 
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit) 
    if ($.browser.webkit) { 
     $('thead tr').each(function (i) { 
      var theadWidth = $(this).width()-1; 
      $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>'); 
     }); 
    } 
}); 

Puedes consultarlo en Chrome/Firefox/IE9. Debería parecer lo mismo.

Answer 8

Ninguna de las soluciones alternativas mencionadas funcionó para mí del todo bien. Esto es lo que terminé con:

TABLE TBODY.highlight { 
    background-image: url(path/image.png); 
} 

TABLE>* { 
    float: left; 
    clear: both; 
} 

Sólo probado en Chrome y Firefox por lo ni idea de cómo funciona en IE (no es importante en mi caso), pero para mí esto funciona a la perfección!