Эффект наведения на гиперссылку не работает должным образом после переключения таблицы в мобильное представление

Question

У меня есть таблица с несколькими столбцами, которые можно переключить в мобильное представление, нажав кнопку. Некоторые поля содержат гиперссылки.

       <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>

В режиме рабочего стола эффект наведения гиперссылки работает, как и положено. После переключения в мобильное представление эффект наведения гиперссылки работает только в самом верхнем поле соответствующих слов.

Я думаю, что проблема в CSS, однако, я не смог заставить его работать должным образом.

Answer 1

В мобильном режиме первый столбец перекрывает второй столбец. Добавьте background-color: green к .show-thin td:before {...}, и вы увидите, что это произойдет. Er go, первый столбец слишком широкий.

Измените width в .show-thin td:before {...} на 28% или менее, и ваша проблема решена ....