IE中的html表格thead和th背景

Posted 2023-03-05

【中文标题】IE中的html表格thead和th背景

【英文标题】：html table thead and th background in IE

【发布时间】：2011-05-09 10:28:46

【问题描述】：

我有一个带有<thead> 和<th> 标签的<table>。

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

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

有什么建议吗？

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

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

从这个question开始修改答案：

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

【参考方案2】：

这只是 IE 与表格相关的错误之一... 我建议添加 display:block;到头，或者改为样式“头 tr”。

【讨论】：

这些都没有在我的 IE7 中做任何事情，并且设置 display:block 完全破坏了 IE7 之外的显示（它根本没有任何效果）。

【参考方案3】：

这不是一个完整的解决方案，但我还不能发布 cmets。

IE 似乎将 thead 规则应用于 th 元素。将 'repeat-x' 更改为 'no-repeat' 并将 th 和 td 的宽度设置为比背景图像宽得多的值，然后删除第 th 个背景图像。您会看到在每个 th 中重复的 thead 图像......因此，当您为 th 启用背景图像时，您实际上是在覆盖 thead 的背景图像。这绝对不是正确的行为，但你去吧。

因此，如果可以的话，最好的选择可能是退出并以其他方式获取该背景图像。也许您可以将它应用到表格上并使用“顶部”来定位它？