CSS: make Row background span accross all columns?

Question

I have a row <tr> that has a few columns <td> in it. I have a background image set to the <tr> but it restarts the background image for each <td> as if it were individually set for each <td>. I would like the one image to span across the background for all the columns in that row.

Is there a way to do that?

here is my code:

<tr bgcolor="#993333" style="color:#ffffff; background:url(images/customer_orders/bar.gif) no-repeat;">
    <td><strong>Product(s)</strong></td>
    <td width="7%"><div align="center"><strong>Qty</strong></div></td>
    <td width="11%"><div align="center"><strong>Total</strong></div></td>
</tr>

Thanks!!

Answer 1

You will probably have to set the background position separately on each <td>. <tr>s don't support most css properties.

For example, in the simple case where left and right columns are equal widths:

tr td{ background-position: center; }
tr td:first-child { background-position: left; }
tr td:last-child { background-position: right; }

This obviously gets much more complex when you the widths are different, and in your case with % widths, you would probably have to do some javascript to get the actual location of the middle column.

Answer 2

It won't change anything if you replace background-repeat property with 'repeat'. The fact is TR does not support backgrounds and you must do it different way.

If you can use divs - go for it. If you must use table, move your header to seperate table and apply background to this new header-table. This is not perfectly correct but will do the job. If I was you I would use bar.gif graphic that I can repeat-x across all header tds.

<table style="background:#993333 url('images/customer_orders/bar.gif'); color:#fff;">
    <tr>
     <th>Product(s)</th>
     <th>Qty</th>
     <th>Total</th>
    </tr>
</table>
<table>
    <tr>
     <td>data1</td>
     <td>tdata2</td>
     <td>data3</td>
    </tr>
</table>