表格行背景图片

Question

可能重复：
在多单元格表格中，我们能解决Chrome中表格行背景图片问题吗？

我想让一张图片作为第一行的背景。问题在于，背景只是分别应用到每个单元格上，而不是整个行。有没有办法解决这个问题？

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

结果应该大致如下所示：

编辑：这个问题只出现在Safari、Opera和Chrome中。还没有检查IE。

- domino

---

看看这个主题的这篇帖子的答案。有很多（在stackoverflow上），但这一个看起来很有前途。 - Eliran Malka

在你的 JS Fiddle 中，使用 Firefox/Chrome 确实是这样的。你用的是什么浏览器？ - David Thomas

@DavidThomas 有趣啊…我使用Safari。 - domino

@DavidThomas 对我来说不行..在Chrome上它失败了，IE和FF它是可行的。 - creativeby

对于未来的读者：在这个帖子中也有你的问题的解决方案。 - Albert221

Answer 1

如果你想在每一行都有这个背景，为什么不把它作为表格背景，并在y轴上重复呢？

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

顺便说一下，我已经在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;
}

- Ozzy

---

我只需要第一行的背景。 - domino

@domino 只有第一行？！让我更新我的答案... - Ozzy

http://browsershots.org/http://jsfiddle.net/rlemon/c3txj/10/show/ 这个链接半小时后会过期，但你可以随时重新运行该工具。 - rlemon

Answer 2

我不知道你的单元格宽度是否可变，但表格元素会呈现为这样。要获得所需的效果，它们需要显示为其他内容：

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

你会发现，现在你需要为 td 和 th 元素设置宽度。

查看演示。

- Paul

---

谢谢，现在我有两个可行的解决方案。 - domino