Странное поведение границы таблицы в Safari / Retina - PullRequest
0 голосов
/ 29 июня 2018

Я пытаюсь сделать что-то необычное, но Safari, наверное, более странный, чем я.

Я хочу сделать таблицу с фиксированным первым столбцом. Таким образом, столбцы overs будут прокручиваться горизонтально.

Я позиционируюсь первым <td> в ряду абсолютно, и кадры показывают с полем влево. Все классно, кроме Safari / Retina, когда я пытаюсь добавить границы в ячейки.

Первый экран - Chrome, второй - Safari. Оба в сетчатке.

click to see image

Почему Safari записывает первый столбец на полпикселя? И что это за странное пространство в 1 пиксель между столбцами?

Вот код:

.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>
...