Question

I have a table coded in HTML as follows;

<table border="1" class="tableBasic">
<thead>
    <tr>
        <th rowspan="2">Head Row 1</th>
        <th rowspan="2">Head Row 1</th>
        <th rowspan="2">Head Row 1</th>
        <th colspan="4">Head Row 1</th>
    </tr>
    <tr>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
    </tr>

</thead>
</table>

So this is a table header spanning 2 rows.

.tableBasic thead{
    background: url("/images/tbl_header.png") repeat-x scroll 0 0 transparent;
}

Is there a rendering difference for the background image between IE and Firefox?

While IE shows the background image as spanning 2 rows (i.e. equals 2 row height), Firefox just shows it for the first row (and does not show any background for the 2nd row)

The background image is tall enough to span 2 rows height.
Unfortunately I won’t be able to modify the HTML code and only can control this from the CSS.

How do I fix this issue in CSS?

IE

Firefox

Answer 1

I think Firefox is doing what you said, you declared the background on thead and repeat only X, so that’s what Firefox is doing. IE is cheating a little which makes it look better, but it’s not following your css declaration. Since you have another little issue to solve, namely the fact that some cells are taller than others and one image won’t do it, I think you should consider aiming your css at the th elements instead.

Perhaps something like this: http://jsfiddle.net/JQK2A/1/

You can define the appropriate background image according to the colspan or rowspan attribute.

CSS

.tableBasic thead th {
    background: green url(background.jpg);
}

.tableBasic thead th[rowspan] {
    background: red url(background2.jpg); 
}

.tableBasic thead th[colspan] {
    background: blue url(background3.jpg); 
}

UPDATE after comment:

If you are OK with using CSS 3, you could try this (using just 1 background image):

.tableBasic thead th {
    background: url(background.jpg);
    background-size: 100% 100%; /* CSS 3 */
}