Table with border-collapse works differently in Chrome and Firefox

Question

Please test this fiddle in Chrome and Firefox. They work differently. In Firefox background is at right position (top enough from the text). But in Chrome background lies below the expected level.

I found an answer here. Bu it does not work for me. I cannot set my table rows to display: block

And I cannot set top padding to tds. Because there has an element with absolute position inside tds which takes full height of td.

The ultimate goal is set background position to top and maintain a distance between each vertical td.

Thanks for helping.

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>

Answer 1

By default, the background-origin property is set to padding-box.

It seems the problem is due to discrepancies about determining the padding box in tabular layouts.

The solution is setting the property to border-box:

tr {
  background-origin: border-box;
}

table {
  border-collapse: separate;
  width: 100%;
}
tr {
  background: url(https://i.sstatic.net/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>