HTML таблица thead и й фон в IE

Question

У меня есть <table> с <thead> и <th> тегами.

Оба тега <thead> и <th> имеют фоновые изображения. фоновое изображение <thead> повторяется, а фоновое изображение <th> располагается с левой стороны ячейки.

В Firefox он работает нормально, но в IE (мой IE версии 7) фоновое изображение <thead> не отображается. Если я удаляю фоновое изображение <th>, то появляется фоновое изображение <thead>.

Есть предложения?

EDIT: Вот мой упрощенный код:

<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

Начиная с этого вопроса и изменяя ответ:

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

Дает разумное приближение к тому, чего вы, вероятно, пытаетесь достичь.Похоже, что это работает примерно так же в Firefox и IE7, хотя я не проверял Opera / Chrome / Safari / IE8.

Вы должны поместить этот грязный ключ в таблицу стилей, специфичную для IE7, и загрузить ее.с условным комментарием, специфичным для IE7, чтобы вы не засоряли свой CSS с помощью IE7 kludges.

Answer 2

Это не полное решение, но я пока не могу оставлять комментарии.

Похоже, IE применяет правила thead к элементам th.Измените 'repeat-x' на 'no-repeat' и установите ширину th и td на что-то намного более широкое, чем фоновые изображения, и удалите фоновое изображение th.Вы увидите, что изображение thead повторяется в каждом th ... Поэтому, когда вы включаете фоновое изображение для th, вы по существу перекрываете фоновое изображение thead.Это определенно не правильное поведение, но вы идете.

Так что, если вы можете, лучшим вариантом может быть просто отступить и вставить фоновое изображение каким-то другим способом.Может быть, вы можете вместо этого применить его к столу и использовать «top» для его размещения?

Answer 3

Это всего лишь одна из ошибок IE, связанных с таблицами ... Я предлагаю добавить display: block;вместо thead, или вместо этого используем thead tr.