Question

I have a <table> with <thead> and <th> tags.

Both <thead> and <th> tags have background images. background image of <thead> is repeated and background image of <th> is positioned on the left side of the cell.

In Firefox it works fine but in IE (my IE is version 7) the background image of <thead> is not displayed. If I remove the background image of <th> then the background image of <thead> appears.

Any suggestion?

EDIT:
Here is my simplified code:

<table>
   <thead>
     <tr>
       <th>AAAA</th>
       <th>BBBB</th>
       <th>CCCC</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1111</td>
       <td>1111</td>
       <td>1111</td>
    </tr>
   </tbody>
</table>

<style>
    thead {
      background: url(PATH TO MY IMAGE) repeat-x center /*this image is not displayed in IE*/
    }
    th {
      background: url(PATH TO MY IMAGE) no-repeat left center
    }
</style>

Answer 1

Starting from this question and modifying the answer:

<style>
  table {
    border-collapse: collapse;
    background: url(PATH_TO_THEAD_IMAGE) repeat-x center;
  }
  tbody {
    background: #fff; /* This covers up most of the <table> background */
  }
  th {
    background: url(PATH_TO_TH_IMAGE) no-repeat left center;
  }
</style>

Gives a reasonable approximation of what you’re probably trying to achieve. This seems to work pretty much the same in Firefox and IE7, I didn’t check Opera/Chrome/Safari/IE8 though.

You should put this sort of dirty kludge into an IE7-specific stylesheet and load it with an IE7-specific conditional comment so that you don’t litter your CSS with IE7 kludges.