带有边框折叠的表格在 Chrome 和 Firefox 中的工作方式不同答案

【问题标题】：Table with border-collapse works differently in Chrome and Firefox带有边框折叠的表格在 Chrome 和 Firefox 中的工作方式不同
【发布时间】：2015-09-12 06:39:00
【问题描述】：

请在 Chrome 和 Firefox 中测试this fiddle。他们的工作方式不同。在 Firefox 中，背景位于正确的位置（距离文本足够高）。但在 Chrome 的背景下低于预期水平。

我找到了答案here。但它对我不起作用。我无法将表格行设置为 display: block

而且我无法将顶部填充设置为 tds。因为tds 内部有一个绝对位置的元素，它占据了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>

【问题讨论】：

标签： css google-chrome css-tables

【解决方案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>

【讨论】：