Having trouble getting a horizontal scroll to work on my table in a React app, specifically on iOS Safari. It works fine on other platforms.
Here is a snippet from my JS file:
<div className={styles.parent}>
<div className={styles.wrapper}>
<table className={styles.table}>...</table>
</div>
<div>
And here's the relevant CSS code:
.parent {
width: 100%;
overflow-x: hidden;
}
.wrapper {
position: relative;
}
.table {
background: transparent;
border-spacing: 12px 0;
min-width: 1em;
display: block;
overflow-x: auto;
max-width: none;
-webkit-overflow-scrolling: touch !important;
}