Как предотвратить переполнение-x в сафари и на мобильных устройствах

В настоящее время у меня есть div, содержащий таблицу, в которой включено переполнение, и всю таблицу можно просмотреть с помощью прокрутки. Проблема в том, что в сафари/мобильном сафари html и тело имеют горизонтальную прокрутку.

Следующий подход работает для Firefox и Chrome, не работает в Safari и не тестировался в IE.

html, body {
  max-width: 100% !important;
  overflow: hidden !important;
}

Вот свойства таблицы

.tableElements {
  margin: 5% auto;
  width: 80%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.tableElements table {
  width: 100%;
  overflow-x: scroll;
  display: block;
  table-layout: auto
}

Не совсем уверен, что еще попробовать.


reactjs html css html-table react-bootstrap-table
person Amir    schedule 07.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте со 100vw. Это порт просмотра, поэтому он не будет больше ширины экрана.

person Johnny Zabala    schedule 07.06.2019
comment
К какой собственности будет применяться 100vw? Изменить: отлично работает, спасибо! - person Amir; 07.06.2019
comment
В вашем случае, я думаю, это будет: ``` html, body { max-width: 100vw !important; переполнение: скрыто !важно; } ``` Поскольку вы не хотите, чтобы html и тело были больше, чем размер экрана. - person Johnny Zabala; 07.06.2019