可能重复:
Can we solve the table row background image problem, in chrome, in multi celled tables?
我正在尝试将一个图像作为第一行的背景。问题是背景分别应用于每个单元,而不是整体。有办法吗?
http://jsfiddle.net/bumpy009/c3txj/
结果应如下所示:
编辑:问题仅出现在Safari,Opera和Chrome中。还没检查IE。
答案 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。