Question

table 
{
    margin: 0 auto;
    border-collapse: collapse;
}

thead 
{
    background: url('../images/theadimage.png') 365px bottom no-repeat;
}

tbody 
{
    background: url('../images/tbodyimage.png') 365px top repeat-y;
}

tfoot 
{
    background: url('../images/tfootimage1.png') 365px top no-repeat, url('../images/tfootimage2.png') 0px -8px repeat-x;
}

This is displaying the images correctly positioned in all browsers except chrome (oddly). If I change the tbody to repeat-x I see the image, but when set to no-repeat or repeat-y, the background images are completely disappearing.

What am I missing here? Is there a solution or a workaround for chrome?

Answer 1

After some more searching I discovered this is a known issue in Chrome and the workaround that worked for me and still maintained proper rendering in all other browsers was to render td and th elements as inline-block and tr elements as block. Adding the following CSS to that mentioned in the original question was the solution that worked for me.

table.problemTable tr {
    display: block;
}
table.problemTable td, table.problemTable th {
    display: inline-block;
}