1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

Страница на html. Таблицы вылазят за пределы моб верстки.

Тема в разделе "Web Coding", создана пользователем wwizard, 17 окт 2018.

Статус темы:
Закрыта.
Модераторы: latteo
  1. alx73

    alx73 Писатель

    Регистр.:
    13 апр 2019
    Сообщения:
    8
    Симпатии:
    0
    Применяйте медиа запросы, например @media (max-width: 767px){css код}. Данный код применится для устройств с шириной экрана 767px и ниже
     
  2. sanni55

    sanni55 Создатель Нарушитель

    Регистр.:
    7 мар 2019
    Сообщения:
    26
    Симпатии:
    26
    Я использую https://fooplugins.com/footable/ Очень легко интегрируется с сайтом, если есть Bootstrap. Если же его нет, так же можно поработать немного ручками и прикрутить к обычному сайту. Но по мне легче поставить бутстрап
     
  3. Angelok

    Angelok Создатель

    Регистр.:
    26 июл 2017
    Сообщения:
    33
    Симпатии:
    17
    тут верно пишут что надо стилями сжать таблицу через директиву @media и по условию ширины документа:
    @media (max-width: 767px){ .... }

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

    как вариант таблицы, которые можно скруллить https://surrogate-mother.ru/surrogatnoe-materinstvo тут для мобильной версии придется выводить транспонированную таблицу и поворачивать ее
    или таблица в контейнере-родителе с overflow-x:scroll;max-width:100%
     
  4. vanich

    vanich Создатель

    Заблокирован
    Регистр.:
    22 дек 2015
    Сообщения:
    10
    Симпатии:
    0
    В свре время пришлось отказаться от таблиц и отверстать все div-ами. Тоже широкие таблицы были.
     
  5. nyasha

    nyasha Создатель

    Регистр.:
    18 май 2019
    Сообщения:
    26
    Симпатии:
    6
    а вариант вставить в бутстрап-разметку таблицу с изменяющимся шрифтом не подошел?
     
  6. hydropericardium

    hydropericardium Постоялец

    Регистр.:
    20 июн 2018
    Сообщения:
    74
    Симпатии:
    20
    Обернуть всю таблицу в див, таблице задать max-width:100%, а диву overflow-x:scroll
     
Статус темы:
Закрыта.