thead - tfoot html

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 IE7 hay el mismo error pero se soluciona con

tr {
position: relative;
}

¿Alguna pista al respecto?

Gracias

Answer 1

Aquí está mi solución jQuery. Es para un thead tr, 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 comprobarlo en Chrome / Firefox / IE9. Debería parecer lo mismo.

Answer 2

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

Solución cuando se utilizan tamaños de celda fijos (conocidos): tr { float : left ; }

Y agregue tamaños de celda apropiados a todas las celdas de la tabla (ya sea a través de estilos de clase o en línea). También había agregado 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, por lo que no he estado explorando ese caso de uso.

Answer 3

Debería arreglar el fondo tr para Chrome y FF:

table.header_table tr#row_1 {
display:flex;
}

Answer 4

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

Answer 5

Esta es la única solución que conozco sin usar JavaScript. Tiene el inconveniente de que especifique la altura de la TR y la TD, porque la TR está posicionada como 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 6

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 7

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;
}
}

Entonces, como puedes ver, solo establece un color de fondo para cada TD, pero el primero, y apunta al Webkit.

Answer 8

Ninguna de las soluciones mencionadas me funcionó del todo bien. Esto es lo que terminé con:

TABLE TBODY.highlight {
background-image: url(path/image.png);
}
TABLE>* {
float: left;
clear: both;
}

Solo se probó en Chrome y Firefox, así que no tengo idea de cómo funciona en IE (no es importante en mi caso), pero para mí esto funciona perfectamente.

Answer 9

Pasé dos días en este problema, finalmente encontré la respuesta aquí:

Necesitas establecer:

background-attachment: fixed;

No estoy seguro de por qué los mods están eliminando esta respuesta, no está en la página.

Answer 10

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

Answer 11

tratar de agregar:

td{white-space: nowrap}

Puede ayudar en alguna situación.