Friday, March 24, 2023
HomeiOS Developmentcss - Why does Safari on iOS scale last HTML table column?

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}>
      <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 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>
      {/* Many more rows here */}


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

enter image description here

But in Safari on iOS it looks like this:

enter image description here

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.


Source link



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments