Я пытаюсь сделать что-то необычное, но Safari, наверное, более странный, чем я.
Я хочу сделать таблицу с фиксированным первым столбцом. Таким образом, столбцы overs будут прокручиваться горизонтально.
Я позиционируюсь первым <td>
в ряду абсолютно, и кадры показывают с полем влево. Все классно, кроме Safari / Retina, когда я пытаюсь добавить границы в ячейки.
Первый экран - Chrome, второй - Safari. Оба в сетчатке.
Почему 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>