表格行背景图像[重复]

Question

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

我正在尝试将一个图像作为第一行的背景。问题是背景被单独应用于每个单元格，而不是作为一个整体。有办法解决吗？

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

结果应该是这样的：

编辑：该问题仅出现在 Safari、Opera 和 chrome 中。还没检查 IE。

Answer 1

如果您希望在每一行中都使用它，为什么不将其设为表格背景并在 y 轴上重复呢？

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

顺便说一句，我使用 IE9、FF12 测试了您的代码 - 每行显示一次图像。但是 Chrome 15 和 Safari 5 会为每个 td 重复它。

编辑

由于您只希望它在第一行，因此您应该使用背景位置来确保图像保持在表格的顶部（通常是第一行的位置，对吗？:P）

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

Answer 2

我不知道您的单元格宽度（它们是可变的吗？），但表格元素会这样呈现。为了获得预期的效果，它们需要显示为其他内容：

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

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

见Demo。