Google Chrome bug with tr background

Question

I'm trying to set a background-image to a table row, but background is applied to all its td children.

In IE7 there is the same bug but it is solve with

tr {
    position: relative;
}

Any hint about it ?

Thank you

Answer 1

This is the only solution I am aware of without using JavaScript. It has the shortcoming of you specifying the height of the TR and the TD, because the TR is positioned absolute. I am also not sure how it will behave in other browsers.

<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 2

This works for me in all browsers:

tr {
background: transparent url(/shadow-down.gif) no-repeat 0% 100%;
display: block;
position: relative;
width: 828px;
}

tr td{
background: transparent;
}