I spent about a half hour looking into this and couldn't find a single thing on it. The thing is, the little test page I wrote up doesn't even look "right" in Firefox 1.0.3.

Are you really seeing the background image span the inner cells in the 'fox?

If the behavior was consistent in all the major browsers, that would lead me to believe that the spec actually lays out the visible behavior...inner table cells taking on the outer row's background image property.

Seems backwards, but we are dealing with tables here ;)

I tested in Opera 8, IE 6 and Firefox 1.0.3.

This only works in Firefox if the document is in standards-compliant mode (and, more specifically, has a doctype). I didn$this->normalizeEntities16bit("8217")t test in XHTML, but that$this->normalizeEntities16bit("8217")s how it is in HTML.

Interesting find, Jonathan. I don$this->normalizeEntities16bit("8217")t forsee any CSS-only solution, though, unfortunately. Who knows, though. Give someone like Eric Meyer this kind of a problem, and I$this->normalizeEntities16bit("8217")m sure they$this->normalizeEntities16bit("8217")ll come up with some funky, logically correct technique to solve it.

I am at my real job, supposed to be doing other things, so I can't try this out, but by any chance are the <td>s inheriting the bg image from the <tr>? would a:
td {
background:none;
} work?

Do you have a test page live?

I was going to recommend trying Josh's idea ...

Jonathan,

if the height of each table row is the same, you can try adding an y-repeating bg image to the whole table ?

I just had the same problem with IE. I found that 5 years ago the same problem was with Ns4, while worked fine for ie5+ and Ns6 (from some article).
Opera 8.02 and Firefox 1.0.6 show table's background correctly, while ie6.0.3790.1830 doesn't and repeats it in each cell.
I had to add
CSS:
td.removeBg{
background-image: none;
}
HTML
<td class="removeBg"> ...</td>

and now it seems to work for explorer.

I've found (and you prob have, too) that Safari suffers from the same problem IE does, except that

td { background-image: none; }

doesn't fix Safari. Anyone found a solution? Thanks.

This is the exact problem I have at the moment.

I tried the td {background-image:none} tip but it just removed everything (in IE 6.0)

Did you find a fix for this?
(I'm hoping to avoid implementing a workaround!!)

> I tried the td {background- image:none} tip but it just removed everything (in IE 6.0)

What does it remove?
Does it remove all content? try to specify background: transparent, it could help, but I am not sure.

specifying td {background-image:none} removes the image entirely i.e. it doesn't show up in any cells, so it doesn't appear on the page - - - makes sense really since td is nested inside tr, so the td style overrides the tr style...

I ended up by replacing the row of cells with a single cell spanning all the columns. It works nicely, it just took a few extra lines of code.

I am not sure if anyone is still looking for a solution to this probelm or not, but as I found this post while I was searching for a work around for the same problem encountered today with IE 7 Beta2 I did work out a solution.

Set the background of the table row using CSS, then create a CSS spec for the TD tag and set the position of the image using background-image and then use percentages.

This worked great for a background image that is used to setup a live data graphing routine.

Yes, that work just well, as I've posted some time ago here: http://kywocs.blogspot.com/2006/03/imagen-de-fondo-en-las-filas-de-una.html
but is in spanish, so I think the majority didn't found that post :P

whew... forgive my newbieness to css. is there some chance someone can give an explanation/example that's a bit more detailed than #14 yet more comprehencable than #15 (er, for those of us who no habla espagnol)? thanks, -jam

Here is about as detailed as it can get. Below is the css listing for both the table row and table cell.

tr.traGraph {
background-image: url(departments/mis/web/trafficStats/images/traBkg.gif);
background-repeat: no-repeat;
background-position: left;
height: 400px;
}

td.traPgGraph {
background-position: 20% 0%;
}

From here is the list for the table indicating where and how the css styles are applied to both the table row and that cell.

<tr class="traGraph" height="400px">
<td width="82"> </td>
<td valign="bottom" align="center" width="32" class="traPgGraph">

I hope this helps to make the solution more clear then it was in my first post.

Well I found this post trying to remember how I had done this in the past. Stupid IE.

What works - although it is a lot of css - is to reuse the row-by-row background image within each td.

You have to class the rows (if they alternate for example) and the td's

In my case, I had a table with a pretty header and footer, and alternating rows of data within the table.

Here's what the HTML would look like:
[table]
[tr class="head"]
[td class="first"][/td]
[td][/td]
[td class="last"][/td]
[/tr]
[tr]
[td class="first"][/td]
[td][/td]
[td class="last"][/td]
[/tr]
[tr class="alt"]
[td class="first"][/td]
[td][/td]
[td class="last"][/td]
[/tr]
[tr class="foot"]
[td class="first"][/td]
[td][/td]
[td class="last"][/td]
[/tr]
[/table]

Then I have to have 4 images: a header image that matches the width of the table, a default image for the "normal" rows, an alternate image for the alternate rows, and a footer image. Again, in my case all the images were the full width of the table.

Then I need to go css crazy.

Using the header as an example, each type of row needs css something like this:

/* default non-edge cell in the row, assuming all the columns except the edges are the same */
.head td
{
background-image:url{header-image.gif};
background-position:center;
}

/* left cell */
.head td.first
{
background-image:url{header-image.gif};
background-position:left;
}

/* right cell */
.head td.first
{
background-image:url{header-image.gif};
background-position:right;
}

you will need to duplicate this for each different type of row - making a fair amount of css.

IE makes me mad... especially since I can't rely on the "class='class1 class2' means of specifying details, which could make this process at least slightly less painful.

oops, the right cell should have been .head td.last - got in a hurry, sorry.

I found a solution at http://www.mynameisal.com/2008/07/30/background-image-on-table-rows-repeating/

Simply give the TR a "position: relative" attribute and then give the TD a "background-image: none" attribute.

The guy who posted this fix did not know why it worked, but I tried it and it certainly did work in IE7!

wow. it took 2 years for a great answer on this topic. Just in time for my table layout. Thanks for posting Kurt!

And just in time for mine too!
Thanks!

you cannot use position: relative; if your table is inside a div with a max-height and a scroll:auto; because then the rows would draw beyond the max-height, and they wouldn't scroll. IE7.... sigh.

works on every other browser except for Mac Safari.

I'm but an amateur, but for me (IE8) worked to remove the <col> tags. I replaced them with a row of height 1 and the columns with the width I needed. To correct for this 1px I shifted the background down by 1 px. (didn't try a row with 0 height). You can see it at www.guideXpert.com, it's the top header.

For IE7

<tr class="current">
<td class="project-number">
</td>
<td>
</td>
</tr>

.current td {background: none;}
.current td {background-color: #dcdcdc !important;}
.current td:first-child {background-color: #dcdcdc !important; background: url(../Images/current-item.png) no-repeat 0 0;}