在IE中的HTML表格thead和背景 [英] html table thead and th background in IE

问题描述

我有< table> ，< thead> 和< th> 标签。

< thead> 和< th> 标签有背景图片。重复< thead> 的背景图片，< th> 的背景图片位于左侧单元格。

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.

在Firefox中它工作正常，但在IE（我的IE是版本7）中，< thead> 未显示。如果我删除< th> 的背景图片，则会显示< thead> 的背景图片。

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.

有任何建议吗？

编辑：
这是我的简化代码：

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>

推荐答案

从这个问题并修改回答：

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

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.

你应该把这种脏污的kludge进入IE7特定的样式表并使用IE7特定的条件注释加载它，这样你就不会乱用你的CSS与IE7 kludges。

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.

这篇关于在IE中的HTML表格thead和背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！