html table thead and th background in IE

问题:

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>

回答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.

回答2:

This is just one of IE's table-related bugs... I suggest adding display:block; to thead, or styling "thead tr" instead.

回答3:

This isn't a complete solution, but I can't post comments yet.

IE seems to apply the thead rules to the th elements. Change the 'repeat-x' to 'no-repeat' and set the width for th and td to something much wider than your background images and remove the th background image. You'll see the thead image repeated in each th ... So when you enable the background image for th, you're essentially overriding thead's background image. This is definitely not correct behavior, but there you go.

So, if you can, the best option might be to just back off and get that background image in there some other way. Maybe you can apply it to the table instead and use 'top' to position it?