html - 表格行背景图片

Question

可能重复：
我们可以解决多单元表格中的表格行背景图像问题吗？

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

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 元素设置宽度。

请参阅演示。