css – Why does Safari on iOS scale last HTML table column?

So I have a React web app and a table in it.

Simplified React code:

<table className={styles.table}>
    <thead>
      <tr className={styles.row}>
        <th className={styles.cellHeader}>Column 1 header</th>
        <th className={styles.cellHeader}>Column 2 header</th>
        <th className={styles.cellHeader}>Column 3 header</th>
      </tr>
    </thead>
    <tbody>
      <tr className={styles.row}>
        <td className={styles.cell}>Row 1 column 1 content</td>
        <td className={styles.cell}>Row 1 column 2 content</td>
        <td className={styles.cell}>Row 1 column 3 content</td>
      </tr>
      {/* Many more rows here */}
    </tbody>
  </table>

CSS:

.table {
  border-collapse: collapse;
}

.row {
  border-bottom: 1px solid @color-border;
}

.cell {
  padding: 5px 0 5px 5px;
}

.cellHeader {
  padding: 5px 0 5px 5px;
  text-align: left;
}

It is rendered as expected in Chrome on desktop and mobile:

But in Safari on iOS it looks like this:

As you can see, the last column got scaled. In Safari developer tool I can’t find any differences between the first 2 columns and the last one, all resulting styles are the exactly same. So is it yet another weird iOS thing? Is there a way to get rid of it?

I have tried removing rows with dev tools, and sometimes (!) when I remove enough rows, then switch to another tab, then switch back, this scaling disappears. Seems to work randomly. I’m totally confused.