Модифицированная внутри таблицы "ломается" модальность из-за касания переполнения css

Question

Если я использую модал в таблице внутри адаптивной таблицы, модал появляется за столом.

Я едва могу решить эту проблему с помощью table-backdrop="false", но это хак и не позволяет полную модальную функциональность. Я также могу изменить загрузочный css, но мне интересно, есть ли способ начальной загрузки с полным доказательством без каких-либо изменений для решения этой проблемы.

Что является причиной этого: я могу исправить это с помощью overflow-x: auto;, но это не позволяет плавную прокрутку на мобильном телефоне ... НО, когда я добавляю -webkit-overflow-scroll: touch, это позволяет прокручивать msooth, НО это нарушаеттак же, как table-responsive

С:

<div class="table-responsive"> //this causes the issues
  <table class="table align-items-center">
    <thead>
      <tr>
        <th scope="col"></th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th></th>
      </tr>
    </tfoot>
    <tbody class="list">
        <tr>
          <td>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal">
              View Order
            </button>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Order</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="table-responsive">
                      <table class="table">
                       ...
                      </table>
                    </div>
                  </div>
                  <div class="modal-footer">
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
    </tbody>
  </table>
</div>

Модал будет серым, недоступным для щелчка или закрытия. При удалении table-responsive из первой таблицы (верхний класс div) все будет работать нормально. При ручном использовании overflow-x: auto; -webkit-overflow-scroll: touch он ломается таким же образом.

Модал должен находиться в той же области, потому что информация внутри зависит от цикла из таблицы.

Есть ли способ обойтиэто? Очень важно, чтобы таблица была отзывчивой для мобильных устройств.

Я хочу, чтобы таблица была отзывчивой и плавной прокрутки.

Answer 1

В результате возникает проблема, связанная с турболинками и использованием форм в таблицах.

Вместо того, чтобы отключать турболинки все вместе, я просто отключаю турболинки на странице с моей ссылкой__

Answer 2

эй, приятель, ты пробовал переместить модал за пределы таблицы?