table row background image [duplicate]

Question

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

I'm trying to have one image as the background for the first row. The problem is that the background gets applied to each cell separately, not as a whole. Is there a way around it?

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

Result should look something like this:

EDIT: The problem appears only in Safari, Opera and chrome. Didn't check IE yet.

Answer 1

If you want it across each row, why not make it the table background instead and repeat it in the y-axis?

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

BTW I tested your code with IE9, FF12 - those are showing the image once per row. But Chrome 15 & Safari 5 is repeating it for each td.

Edit

Since you only wanted it in the first-row, you should use background-position to make sure the image stays at the top of the table (that's usually where the first row is, right? :P)

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

Answer 2

I don't know about your cell widths (are they variable?), but table elements render as such. For getting the desired effect, they need to be displayed as something else:

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

You will notice, that now you need to set widths for td and th elements, though.

See Demo.