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 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;
}

Answer 2

In tr style tag include Style='Display:inline-table;' It works fine in all browser.

Answer 3

Chrome (WebKit) overrides the position:relative for table rows and calculates the style to static. Bug or feature - this prevents the position:relative fix as is used in IE7.

Solution when using fixed (known) cell sizes: tr { float:left; }

And add appropriate cell sizes to all cells in the table (either via class or inline styles). I had also added row sizes, however it might not be required for the solution to work.

I have no need for a solution for dynamic cell sizes, so I haven't been exploring that usecase.

Answer 4

What I ended up doing was:

table.money-list tr {
background: url(images/status-2.gif) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/
    table tbody tr td:first-child {
    background-image: none;
    background-color: transparent;
}

table tr td{
    background-color: #FFFFFF;
}
}

So as you can see, just set a background color to every TD but the first one, and target Webkit.

Answer 5

None of the workarounds mentioned worked for me quite right. Here's what I ended up with:

TABLE TBODY.highlight {
    background-image: url(path/image.png);
}

TABLE>* {
    float: left;
    clear: both;
}

Only tested in Chrome and Firefox so no idea how it works in IE (not important in my case), but for me this works flawlessly!