Strange table-border behavior in Safari/Retina

Question

I'm trying to do some unusual thing, but Safari is more strange than me, I guess.

I want to make table with fixed first column. So, overs columns will scroll horizontally.

I'm positioning first <td> in a row absolutely and overs show with margin-left. Everything is cool except Safari/Retina look when I'm trying to add borders to cells.

First screen is Chrome, second - Safari. Both in Retina.

Why Safari put down first column on half pixel? And what is that strange 1px space between columns?

Here is code:

.container {
  position: relative;
}

.inner{
  margin-left: 116px;
}

table {
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 100px;
  border-top: 1px solid black;
  padding: 0 8px;
}

.fixedColumn {
  position: absolute;
  left: 0;
}

<div class="container">
  <div class="inner">
    <table>
      <tr>
        <td class="fixedColumn">1</td>
        <td class="scrollableColumn">2</td>
      </tr>
      <tr>
        <td class="fixedColumn">3</td>
        <td class="scrollableColumn">4</td>
      </tr>
    </table>
  </div>
</div>