Нет горизонтальной прокрутки в окне браузера в теме Storefront (Wordpress + Woocommerce), как ее вернуть?

Question

[globus812]

Wordpress + Woocommerce. В мобильной версии темы Storefront нет горизонтальной прокрутки в окне браузера. Поэтому большие таблицы невозможно прочитать. Кто-нибудь может знает как ее вернуть?
Установка в дочерней теме

body {
overflow-x: auto; 
}

не помогает, так же как и overflow-x: scrol;

Comments

[Алексей Карагодников]

Есть ли у вас возможность обернуть таблицы в дополнительный div? Если да, то задайте именно ему overflow-x: auto

[globus812]

Алексей Карагодников, Алексей, спасибо за ответ! Но в таком случае придется у каждой таблицы вручную прописывать этот div. Возвращение горизонтальной линейки прокрутки решило бы эту проблему глобально. Может быть есть какие-то еще способы?
В случае с body {overflow-x: auto; } сама линейка появляется, но она не активна, бегунок не работает почему-то.
Написано только что

[Алексей Карагодников]

globus812, например, если у таблиц есть определенный класс (и в теме нет одного шаблона, где можно было бы обернуть таблицы в новый блок), вы можете обернуть таблицы в блок с помощью метода jQuery wrap().

[globus812]

Алексей Карагодников, спасибо, буду разбираться! К сожалению с JavaScript пока у меня плохо. Надеялась решить вопрос с помощью css...

[globus812]

Спасибо, Алексей Карагодников, за подсказку в комментариях! Вопрос решился оборачиванием всех таблиц div-ом в своем файле скриптов js:

var $ = jQuery.noConflict();
$(document).ready(function () {
  $('table').wrap('<div class="tablescroll"></div>');
});

и добавлением класса "tablescroll" в файл стилей css:

.tablescroll {
	max-width:100%;
	overflow-x: auto;
	min-width:240px;
	-webkit-overflow-scrolling: touch;
	}

[Алексей Карагодников]

globus812, вы тогда оформите этот комментарий, как ответ, чтобы вопрос не остался пустым

Answer 1

[globus812]

Спасибо, Алексей Карагодников, за подсказку в комментариях! Вопрос решился оборачиванием всех таблиц div-ом в своем файле скриптов js:

var $ = jQuery.noConflict();
$(document).ready(function () {
  $('table').wrap('<div class="tablescroll"></div>');
});

и добавлением класса "tablescroll" в файл стилей css:

.tablescroll {
  max-width:100%;
  overflow-x: auto;
  min-width:240px;
  -webkit-overflow-scrolling: touch;
  }