Как сделать таблицу мелкой по ширине экрана на мобильных?
Дано: сайт с адаптивным дизайном и большими таблицами данных.
Весь контент отображается нормально, но вот таблицы вылазят по ширине, появляется горизонтальный скролл (в таблице 6-7 столбцов).
Перерыл кучу решений в виде сокрытия части столбцов, разворачивания части столбцов по кнопке, введения горизонтального скрола внутри таблицы и т.д. - в общем то все представленные в интернете варианты.
Но. Все они не подходят ввиду того, что таблица должна отображаться полностью во всю ширину, такова особенность данных в ней.
Вопрос: как это сделать, чтобы остальной контент оставался адаптивным? То есть мне по сути нужна таблица, как если бы на сайте вообще не было адаптива - мелкая во всю ширину экрана.
Дмитрий Карпов, со шрифтами будет геморрой тогда. Потому что процентное их значение будет наследовать значение от родителя. А они там будут в px, em да rem — т. е. не привязаны к размеру экрана. И проценты тут будут как em'ы работать.
- либо будет мелкий шрифт
- либо часть столбцов нужно скрывать
- либо будет скролл
- либо изменение в представлении данных, например, слова заменять на иконки
Постоянно учусь и радуюсь жизни. И вам того желаю!
Можно попробовать завернуть таблицу в div, задать необходимые размеры и свойство box-sizing: border-box; Ну и owerlflow: scroll. Таким образом у вас блок будет по ширине окна браузера, а саму таблицу для просмотра можно скролить при просмотре. Как временная мера, а потом уже определиться.
Делал так, но вариант не подходит.. Мало того, что ее скроллить влево-вправо постоянно надо, так еще и с такой реализацией нельзя даже отдалить, чтобы увидеть всю таблицу целиком)
Переделать таблицы на дивы. ul li например. в десктопе ul задаешь display: table; li - display: table-cell. А в мобайле
меняешь на display: block. В мобайле как таблица уже не будет выглядеть но зато вся информация будет вмещается
Простой
Средний
