Не масштабируется таблица в моб. версии Есть решение

Создали страницу с обычной разметкой таблицы 

проблема в том , что открытая страничка не масштабируется в моб. версии , т.е. ее правая часть не влезает в экран и не видна ...

вправо-влево тоже не двигается...

если изменить ориентацию экрана , то уже влезает вся 


как бы обойти этот момент? чтобы таблицу можно было уменьшать ( увеличение  кстати работает )   или была прокрутка вправо-влево ?

1 ответ

  • 2
    replicant 27 декабря 2019 17:09 # Решение

    Заверните таблицу в блок типа такого

    <div style="display: block;width: 100%;overflow-x: auto;">
    таблица
    </div>

    У меня в мобильной версии на сайтах такая штука нормально работает и широкие таблицы внутри новости двигаются в сторону.

    Конечно, если бы вы дали ссылку на эту новость, то было бы проще проверить прямо налету.

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

    • +1
      Дмитрий К Дмитрий К 27 декабря 2019 18:35 #

      Отлично, спасибо за помощь ! Код работает - все теперь скролится вправо-влево. Ура! 

      Ключевое тут, если не ошибаюсь - 

      overflow-x: auto

      Фиксация первой строки и первого столбца была бы очень полезна. Но как я понимаю просто HTML тегами это не прописать (( Нужно как-то фиксировать и стыковать  одну таблицы из первой строки и первого столбца  , со второй таблицей где все данные и вторая таблица скролится и не наезжает на первую )) . В экселе это просто ) , а тут непонятно ... 



Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите