Html 表格行背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10514900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
table row background image
提问by domino
Possible Duplicate:
Can we solve the table row background image problem, in chrome, in multi celled tables?
I'm trying to have one image as the background for the first row. The problem is that the background gets applied to each cell separately, not as a whole. Is there a way around it?
我正在尝试将一个图像作为第一行的背景。问题是背景分别应用于每个单元格，而不是整体。有办法解决吗？
http://jsfiddle.net/bumpy009/c3txj/
http://jsfiddle.net/bumpy009/c3txj/
Result should look something like this:
结果应该是这样的：
EDIT: The problem appears only in Safari, Opera and chrome. Didn't check IE yet.
编辑：该问题仅出现在 Safari、Opera 和 chrome 中。还没有检查IE。
采纳答案by Ozzy
If you want it across each row, why not make it the table background instead and repeat it in the y-axis?
如果您希望它跨越每一行，为什么不将其作为表格背景并在 y 轴上重复呢？
table {
width: 300px;
background-image: url('mypic.jpg');
background-repeat: repeat-y;
}
BTW I tested your code with IE9, FF12 - those are showing the image once per row. But Chrome 15 & Safari 5 is repeating it for each td.
顺便说一句，我用 IE9、FF12 测试了您的代码 - 这些代码每行显示一次图像。但是 Chrome 15 和 Safari 5 会为每个 td 重复它。
Edit
编辑
Since you only wanted it in the first-row, you should use background-position to make sure the image stays at the top of the table (that's usually where the first row is, right? :P)
由于您只希望它在第一行，因此您应该使用 background-position 来确保图像位于表格的顶部（通常是第一行所在的位置，对吗？：P）
table {
width: 300px;
background-image: url('mypic.png');
background-repeat: no-repeat;
background-position: center top;
}
回答by Paul
I don't know about your cell widths (are they variable?), but table elements render as such. For getting the desired effect, they need to be displayed as something else:
我不知道你的单元格宽度（它们是可变的吗？），但表格元素是这样呈现的。为了获得所需的效果，它们需要显示为其他内容：
tr {display: block;}
td, th {display: inline-block; background: transparent;}
You will notice, that now you need to set widths for td and th elements, though.
您会注意到，现在您需要为 td 和 th 元素设置宽度。
See Demo.
见演示。
