Scroll on iPhone doesn’t work

Hello all!
I’ve seen other posts that have a similar problem, but none of the solutions worked for me. I’ll show below what I’ve tried, and the code I have.

I have 2 tables with “horizontal scrolling” enabled, which work fine for Androids, but apparently doesn’t work on iPhones – it simply “cuts” what doesn’t fit (and I don’t want to wrap the content). I don’t know if the problem is related, but the header row is not aligned with the table.
It’s the bottom table in this website: https://mascaras-sociais.com/tipos-mascaras
Screenshot on iphones: https://imagizer.imageshack.com/img923/342/mBsaHD.jpg
(The big table in this link has the same problem https://mascaras-sociais.com )

Here’s what I have tried and didn’t work:
– Using responsive tables [table id=5 responsive=”scroll” /]
– .tablepress-id-5 {word-break: normal;}
– .entry-content .tablepress-id-5 {word-break: normal;}
– .tablepress-scroll-wrapper {-webkit-overflow-scrolling: touch;}
– remove the {white-space: nowrap;} that I have bellow
– .tablepress { table-layout: auto;}

Here’s the css code I have for the table (5 columns&2rows):

.tablepress { table-layout: auto;}

.tablepress-id-5 thead th,
.tablepress-id-5 tbody td {
font-size: 12px;}

.tablepress-id-5 thead th {
background-color: #90CAF9;}

.tablepress-id-5 .row-2 td {
background-color: #E3F2FD;}

.tablepress-id-5 .column-5 {
text-align: left;}

.tablepress-id-5 thead th,
.tablepress-id-5 tbody td {
text-align: center;}

.tablepress-id-5 .column-1,
.tablepress-id-5 .column-2,
.tablepress-id-5 .column-3,
.tablepress-id-5 .column-4 {
white-space: nowrap;}

I am a beginner in this areas so I would greatly appreciate if you could help me! ??
Thank you,
Hugo

• This topic was modified 4 years, 6 months ago by hugoribeiro.

The page I need help with: [log in to see the link]