tabla de imagen de la fila fondo

Question

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

estoy tratando de tener una imagen como fondo de la primera fila. El problema es que el fondo se aplica a cada celda por separado, no como un todo. ¿Hay alguna forma de evitarlo?

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

resultado debería ser algo como esto:

EDIT: El problema sólo aparece en Safari, Opera y Chrome. No revisé IE todavía.

Answer 1

Si lo desea en cada fila, ¿por qué no convertirlo en el fondo de la tabla y repetirlo en el eje y?

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

BTW He probado su código con IE9, FF12 - ésos están mostrando la imagen una vez por fila. Pero Chrome 15 & Safari 5 lo repite para cada td.

Editar

Dado que sólo quería que en la primera fila, se debe utilizar background-position para asegurarse de que la imagen se queda en la parte superior de la mesa (que es por lo general en la primera fila es, ¿verdad?: P)

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

Answer 2

no sé acerca de sus anchos de células (que son variables?), pero los elementos de la tabla hacen como tal. Para conseguir el efecto deseado, es necesario que se muestra como algo más:

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

Usted se dará cuenta, que ahora tiene que establecer el ancho de los elementos td y th, sin embargo.

Ver Demo.