请在Chrome和Firefox中测试this fiddle。他们的工作不同。 在Firefox中,背景位于正确的位置(文本顶部足够)。但在Chrome中,背景低于预期水平。
我找到了答案here。不,它对我不起作用。我无法将表格行设置为display: block
我无法将顶部填充设置为td
。因为在td
s内有一个绝对位置的元素,其高度为td
。
最终目标是将背景位置设置为顶部并保持每个垂直td
之间的距离。
感谢您的帮助。
table {
border-collapse: separate;
width: 100%;
}
tr {
background: url(http://dummyimage.com/10x5/000/fff.jpg) repeat-x left top;
}
td {
border-top: 30px solid transparent;
}
<table>
<tbody>
<tr>
<td>tr1 td1</td>
<td>tr1 td2</td>
<td>tr1 td3</td>
</tr>
<tr>
<td>tr2 td1</td>
<td>tr2 td2</td>
<td>tr2 td3</td>
</tr>
</tbody>
</table>
答案 0 :(得分:1)
默认情况下,background-origin
属性设置为padding-box
。
似乎问题是由于在表格布局中确定填充框的差异。
解决方案是将属性设置为border-box
:
tr {
background-origin: border-box;
}
table {
border-collapse: separate;
width: 100%;
}
tr {
background: url(http://i.stack.imgur.com/P4wQ9.jpg) repeat-x left top;
background-origin: border-box;
}
td {
border-top: 30px solid transparent;
}
<table>
<tbody>
<tr>
<td>tr1 td1</td>
<td>tr1 td2</td>
<td>tr1 td3</td>
</tr>
<tr>
<td>tr2 td1</td>
<td>tr2 td2</td>
<td>tr2 td3</td>
</tr>
</tbody>
</table>