表格中的位置绝对列未正确对齐（Safari iOS）

Question

问题

我有一个带有前两列position: absolute的表，因此它们是“固定的”，而右边的列是可滚动的。这在Chrome，Firefox，Mac上的Safari等上非常有效，但在iOS上的Safari上却无效。 position: absolute列未对齐，并且其边界显示在右侧非绝对定位列的边界下方。

示例

Here's an example to be viewed on iOS.

代码

html

<div class="outer">
    <div class="scroller">
      <table>
        <thead>
          <th class="th1">Rank</th>
          <th class="th1">User</th>
          <th class="th2">Week 1</th>
          <th class="th2">Week 2</th>
          <th class="th2">Week 3</th>
          <th class="th2">Week 4</th>
          <th class="th2">Week 5</th>
          <th class="th2">Week 6</th>
          <th class="th2">Week 7</th>
        </thead>
        <tbody>
          <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
            <td>col 4</td>
            <td>col 5</td>
            <td>col 6</td>
            <td>col 7</td>
            <td>col 8</td>
            <td>col 9</td>
          </tr>
          <!-- numerous more rows like the one above ... -->
        </tbody>
      </table>
    </div>
</div>

css

.outer {
  position: relative;
  margin: 15px;
}

.scroller {
  display: block;
  width: calc(100% - 174px);
  overflow-x: auto;
  -webkit-overflow-scrolling: unset;
  margin-left: 173px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.89rem;
}

/* make the first column fixed */
tr > th:first-of-type,
tr > td:first-of-type {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  left: 0;
  position: absolute;
  top: auto;
  width: 54px;
  text-align: center;
}

/* make the second column fixed */
tr > th:nth-of-type(2),
tr > td:nth-of-type(2) {
  left: 54px;
  position: absolute;
  top: auto;
  width: 120px;
}

tr > th:last-of-type,
tr > td:last-of-type {
  border-right: 1px solid #000;
}

tr:last-of-type td {
  border-bottom: 1px solid #000;
}

th,
td {
  border-top: 1px solid #000;
  padding: 0.45rem;
  vertical-align: top;
  white-space: nowrap;
  color: #212529;
  background-color: #fff;
}

th {
  border-bottom: 2px solid #000;
}

td {
  overflow-x: hidden;
  text-overflow: ellipsis;
}

尝试修复

我尝试使前2个<th>（位置绝对）具有top: 0而不是top: auto，这对这2个有一点帮助，但是其余绝对位置的单元格是仍然定位不正确。