In mobile mode the the first column overlaps the second column. Add background-color: green to .show-thin td:before {...} and you will see it happen. Ergo, the first column is too wide.

Change width in .show-thin td:before {...} to 28% or less and your problem is solved….

I have a table with several columns that can be switched into mobile view by clicking a button. Some fields contain hyperlinks.

       <style>

           .show-thin {
            width: 930px;      /* complete width of alternative table view */
           }

            /* Force table to not be like tables anymore */
           .show-thin table, .show-thin thead, .show-thin tbody, .show-thin th, .show-thin td, .show-thin tr {
                    display: block;
            }

            /* Hide table headers (but not display: none;, for accessibility) */
           .show-thin thead tr {
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
            }

           .show-thin tr { border: 1px solid #ccc; }

           .show-thin td {
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eef;
                    position: relative;
                    padding-left: 30%;      /* distance of table-values from left margin 30px */
            }

           .show-thin td:before {
                    /* Now like a table header */
                    position: absolute;              /* puts field-names at left margin */
                    /* Top/left values mimic padding */
                    top: 6px;
                    left: 6px;
                    width: 45%;
                    padding-right: 10px;
                    white-space: nowrap;
            }

            /*
            Label the data
            */
           .show-thin td:before { content: attr(data-label); }

        </style>

        <script>

        function toggle() {
          var table = document.querySelector('.myTable');
          table.classList.toggle('show-thin');
        }

        </script>


        <button onclick="toggle()">Toggle</button>
        <hr/>
        <table class="myTable">
        <thead>
          <tr class="tr thin-hide">
            <th data-label='Nr'>Nr</th>
            <th>Estimated arrival date</th>
            <th>Amount</th>
            <th>Period</th>
            <th>Period2</th>
            <th>Period3</th>
            <th>Period4</th>
            <th>Period5</th>
            <th>Period6</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td data-label="Nr">1234</td>
            <td data-label="Estimated Arrival Date">03/15/2001</td>
            <td data-label="Amount">$1.00</td>
            <td data-label="Period"><a href='https://www.startpage.com' target='_blank'>Startpage</a></td>
            <td data-label="Period2"><a href='https://www.wikipedia.com' target='_blank'>Wikipedia</a></td>
            <td data-label="Period3"><a href='https://www.google.com' target='_blank'>Google</a></td>
            <td data-label="Period4">3rd</td>
            <td data-label="Period5">3rd</td>
            <td data-label="Period6">3rd</td>
          </tr>
          <tr class="tr">
            <td data-label="Account">1235</td>
            <td data-label="Estimated Arrival Date">04/21/2002</td>
            <td data-label="Amount">$12.00</td>
            <td data-label="Period">4th</td>
            <td data-label="Period2">4th</td>
            <td data-label="Period3">4th</td>
            <td data-label="Period4">4th</td>
            <td data-label="Period5">4th</td>
            <td data-label="Period6">4th</td>
          </tr>
          <tr>
            <td data-label="Account">4594</td>
            <td data-label="Estimated Arrival Date">11/11/2011</td>
            <td data-label="Amount">$45.50</td>
            <td data-label="Period">2nd</td>
            <td data-label="Period2">2nd</td>
            <td data-label="Period3">2nd</td>
            <td data-label="Period4">2nd</td>
            <td data-label="Period5">2nd</td>
            <td data-label="Period6">2nd</td>
          </tr>
          <tr>
            <td data-label="Account">4594</td>
            <td data-label="Estimated Arrival Date">11/11/2011</td>
            <td data-label="Amount">$45.50</td>
            <td data-label="Period">2nd</td>
            <td data-label="Period2">2nd</td>
            <td data-label="Period3">2nd</td>
            <td data-label="Period4">2nd</td>
            <td data-label="Period5">2nd</td>
            <td data-label="Period6">2nd</td>
          </tr>
          </tbody>
        </table>

In desktop mode the hover effect of the hyperlinks works as it should.
After switching into mobile view the hover effect of the hyperlinks works only in the very upper margin of the respective words.

I think the problem is in the CSS, however, I didn´t get it to work properly.