Как сделать прокрутку вложенной таблицы на мобильном телефоне с помощью Overflow: прокрутка без рывков

Question

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

Я попытался переполнить сенсорную прокрутку до дочерней таблицы и добавил ее в родительскую. Div, но не работает. Пожалуйста, кто-нибудь, помогите мне в этом.

@media only screen and (max-device-width: 767px) and (min-device-width: 320px) {
  .panel-information {
    overflow: scroll;
    display: block;
    height: 60%;
  }
  .price-box-heads {
    overflow: scroll;
  }
}

<div class="panel-information">
  <table class="panel-table">
    <tbody>
      <tr>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

Заменить max-device-width и min-device-width просто max-width и min-width:

@media only screen and (max-width: 767px) and (min-width: 320px) {
  body {
    background-color: red;
  }

  .panel-information {
    overflow: scroll;
    display: block;
    height: 60%;
  }

  .price-box-heads {
    overflow: scroll;
  }
}

<div class="panel-information">
  <table class="panel-table">
    <tbody>
      <tr>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table width="100%" class="price-box-heads">
            <thead targetattr="heads">
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Public</td>
                <td>Priority</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> 5</td>
                <td>Cruise Line Discount</td>
              </tr>
              <tr>
                <td>6 </td>
                <td>Cruise Line Offer</td>
              </tr>
              <tr>
                <td>8 </td>
                <td>Cruise Line Amount</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>