代码之家 › 专栏 › 技术社区 › rahim asgari

IE中的HTML表格thead和th背景

html-table background internet-explorer css html

rahim asgari · 技术社区 · 14 年前

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

两个 <thead> 和 <TH & GT; 标签有背景图像。的背景图像 <thead> 重复和背景图像 <TH & GT; 位于单元格的左侧。

在Firefox中,它可以正常工作,但在IE(我的IE是第7版)中,它的背景图像 <thead> 不显示。如果我删除的背景图像 <TH & GT; 然后是的背景图像 <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>

3 回复 | 直到 8 年前

Community CDub 8 年前

从这个开始 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>

给出一个你可能想要达到的目标的合理的近似值。在火狐和IE7中,这看起来差不多,但我没有检查opera/chrome/safari/ie8。

你应该把这种肮脏的Kludge放到一个特定于IE7的样式表中,并加载一个特定于IE7的条件注释,这样你就不会在CSS中乱丢IE7 Kludge了。

Lilith River 14 年前

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

aptwebapps 14 年前

这不是一个完整的解决方案,但我还不能发表评论。

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

所以,如果可以的话,最好的选择可能是退后一步,以其他方式获取背景图像。也许你可以把它应用到桌子上,然后用“top”来定位它?

推荐文章

Nora PÄ« · 统一问题在2d精灵后面排序立方体

2 年前

Codename K · VB6-如何使窗体排在第二位?

7 年前

Tobias von Falkenhayn · 如何为无休止的滚动回收视图绘制背景

7 年前

uzi_no_uzi · 如何修复背景位置的错误?

7 年前

EagerToLearn · .Net控制台应用程序在后台运行

7 年前

Eric Chong · Swift中所有视图控制器的背景图像相同

7 年前

Zhihar · css:带背景的选项卡样式边框

7 年前

Amine Messaoudi · icepdfcore使JFrame在后台保持打开状态

7 年前

Lukasz · WORDPRESS-不需要的HTML按钮背景色

7 年前

Jorge · div上的方形图案作为背景(使用纯CSS)

7 年前