Responsive Mode on iOS Behaving Strangely with Elementor

This week, I was asked to help with the display of a table on mobile devices.
Scrolling tables horizontally on smaller devices, seems to be the way most people tackle this issue.

I’m not familiar with this plugin, but I tried turning on responsive mode and it didn’t help. The column widths were still squashing up, so that the entire table could fit on the display. I therefore changed the column widths to fixed and all appeared to work as I expected.

I’ve since discovered that the tables weren’t displaying correctly on iOS devices.
The column widths were squashing up, so that the entire table could fit on the display.
If nothing else is on the page, the horizontal scroll works fine on iOS devices.
If there’s enough content above the tables, causing you to scroll down, the layout of the tables breaks when you scroll down. I was able to check this, by having just enough content, so that the top part of the table loaded into the viewport.
I’ve tested this on a regular page and it seems fine, so it appears to just be an issue with Elementor.

When I created a new dummy table, the issue went away, even in an Elementor page on an iOS device. I therefore started to review the settings between my new table and the tables I’ve been trying to fix. The minute I turned off Responsive mode, the table started working as expected on iOS devices.

I’ve therefore come to the conclusion that for the table to work across different sized displays, responsive mode needs to be turned off.

Hopefully this information is useful to other users and the plugin developer.