表行背景图像

时间:2012-05-09 11:10:07

标签: html css

  

可能重复:
  Can we solve the table row background image problem, in chrome, in multi celled tables?

我正在尝试将一个图像作为第一行的背景。问题是背景分别应用于每个单元,而不是整体。有办法吗?

http://jsfiddle.net/bumpy009/c3txj/

结果应如下所示:

enter image description here

编辑:问题仅出现在Safari,Opera和Chrome中。还没检查IE。

2 个答案:

答案 0 :(得分:4)

如果你想跨越每一行,为什么不把它作为表背景而是在y轴上重复呢?

table {
    width: 300px;
    background-image: url('mypic.jpg');
    background-repeat: repeat-y;
}

BTW我用IE9,FF12测试了你的代码 - 那些每行显示一次图像。但Chrome 15& Safari 5正在为每个td重复它。

修改

由于你只想在第一行中使用它,你应该使用background-position来确保图像保持在表格的顶部(通常是第一行的位置,对吧?:P)

table {
    width: 300px;
    background-image: url('mypic.png');
    background-repeat: no-repeat;
    background-position: center top;
}

答案 1 :(得分:2)

我不知道你的单元格宽度(它们是变量吗?),但表格元素是这样呈现的。为了获得所需的效果,需要将它们显示为其他内容:

tr {display: block;}
td, th {display: inline-block; background: transparent;}

你会注意到,现在你需要为td和th元素设置宽度。

请参阅Demo