CODEWITHSUNDEEP
htmlcssgoogle-chrome
Dario
Dario

Reputation: 343

Google Chrome bug with tr background

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

Upvotes: 21

Views: 18028

Answers (10)

dessalines
dessalines

Reputation: 7382

Spent two days on this problem, finally found the answer here:

You need to set:

background-attachment: fixed;

Not sure why the mods are deleting this answer, its not on the page.

Upvotes: 1

avrahamm
avrahamm

Reputation: 109

It should fix the tr background for Chrome and FF:

table.header_table tr#row_1 {    
    display:flex;
}

Upvotes: 0

ravilov
ravilov

Reputation: 131

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!

Upvotes: 1

user1356988
user1356988

Reputation:

Here's my jQuery solution. It's for a thead tr but should work for tbody tr's as well.

    $(document).ready(function () {
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit)
    if ($.browser.webkit) {
        $('thead tr').each(function (i) {
            var theadWidth = $(this).width()-1;
            $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>');
        });
    }
});

You can check it out in Chrome/Firefox/IE9. It should appear the same.

Upvotes: 0

Hector A Centeno
Hector A Centeno

Reputation: 63

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.

Upvotes: 1

Sanket
Sanket

Reputation: 67

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

Upvotes: 5

cposer
cposer

Reputation: 9

I'd recommend to set the background-image for the table-cells directly, shifting the background-position of all subsequent cells to the left so that it looks as it should. This way you don't have to slice your background-image.

Upvotes: 0

SGResponse
SGResponse

Reputation: 31

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.

Upvotes: 3

s_hewitt
s_hewitt

Reputation: 4302

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

Upvotes: 12

Ivo Sabev
Ivo Sabev

Reputation: 5240

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>

Upvotes: 0

Related Questions