I am currently creating content for a web application.

The content will be generated and placed under a specific div element in the html with the following code.

table elements in that content may extend beyond the content parent element, so I want it to scroll.

Here is that code I tryed. Forgive me if I put "touch-action:auto" in each tag for environmental reasons of the web app.

<div class="global" style="overflow: scroll; -webkit-overflow-scrolling: auto; width: 100%; touch-action: auto;">
    <div class="menu-container" style="touch-action: auto;">
        <div class="header-title">
            <h1 id="title">TITLE</h1>
        </div>
        <div class="main-container" style="touch-action: auto;">
            <table class="unit-selection" style="touch-action: auto;">
                <tbody>
                    <tr class="term">
                        <th id="1st">###</th>
                        <th id="2nd">###</th>
                        <th id="3rd">###</th>
                    </tr>
                    <tr class="data">
                        <td>$$$</td>
                        <td>$$$</td>
                        <td>$$$</td>
                    </tr>
                    <!--Below this are dozens of "<tr>...</tr>"-->
                </tbody>

            </table>
        </div>
    </div>
</div>

These are the CSS codes that will be loaded.

    .global {
    height: 100%;
    background-color: whitesmoke;
    text-align: center;
    border:3px solid blue;
    font-size: 50px;
    }

    table.unit-selection{
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        margin:auto;
        width:90%;
        height: 100%;
        border-collapse: separate;
        border-spacing: 35px 35px;
    }
    
    
    table.unit-selection th {
        background-color:white;
        padding: 15px;
        text-align:center;
        box-shadow: -7px -4px 3px 0 rgba(0, 0, 0, .2);
    }
    
    table.unit-selection td {
        border: 2px solid blue;
        background-color:aqua;
        padding:15px;
    }
    
    .unit td {
        cursor: pointer;
    }

It scrolls fine on my windows tablet, but not on my iPad (iOS15). I researched and implemented solutions on the web, but to no avail. Please help me.

In addition, I apologize for my poor English　and Code.