Таблица не вмещается на мобильном экране

Таблицы размещаемые на вэб-страницах иногда не отображаются полностью по ширине экрана браузера мобильных устройств. На примерах рассмотрим и проанализируем, как правильно составить таблицу на три — четыре колонки так, чтобы она разместилась в пределах экрана мобильных устройств.

Для размещения данных в таблицах без выхода за границы экрана на мобильных устройствах используем два способа составления таблицы: путь проб и ошибок и обдуманный, основанный на выводах из практики.

Примеры (Из практики данного интернет проекта).

Таблица на три колонки

ДГМ в переключательных СВЧ диодах

Составим таблицу, приняв ширину столбцов: 31+9+10, на ширину экрана (50 мм.), указываем (с запасом на 1%): 49%:

Переключательный СВЧ диод Содержание драгоценных металлов
Золото (мг.) Серебро (мг.)
2А599А-3…Г-3* 19,34 4,822

Эта таблица на три колонки, на экранах мобильных устройств не вместилась в ограниченные пределы экрана и приняла вид — 29+12+15 на 56%. (Не вместилась «о» 3-й колонки; Термин «Переключательный» заполнил 60% экрана. ) 2. ДГМ в переключательных СВЧ диодах Уменьшим ширину букв слов «Переключательный» и «Серебро», а слова: «драгоценных металлов» заменим коротким синонимом «ДГМ». Подкорректируем и ширину столбцов таблицы до: 24+12+13 при 49%:

Переключательный СВЧ диод Содержание ДГМ
Золото (мг.) Серебро (мг.)
2А599А-3…Г-3* 19,34 4,822

Получившаяся таблица вместилась полностью заняв 51% мобильного экрана — 26+12+13 — 51%.


Пример 2 (Тоже из практики).

Таблица на четыре колонки

ДГМ в умножительных СВЧ диодах

Таблица с начальной шириной столбцов: 33+9+9+9:

Умножительный СВЧ диод Содержание драгоценных металлов
Зл. (мг.) Ср. (мг.) Пд. (мг.)
2А699А 5,7592 1,6954

Ширина на экране мобильного телефона: 24+11+11+11 на 57%; (3-й столбец виден на 30%) 2. ДГМ в умножительных СВЧ диодах Уменьшаем шрифт для: «Умножительный» чем сужаем первый столбик. Также уменьшаем шрифт для цифровых данных из более чем пяти знаков, с целью сузить столбики с цифрами. Ширину столбцов устанавливаем: 20+10+10+9 и 49%:

Умножительный СВЧ диод Содержание драгметаллов
Зл. (мг.) Ср. (мг.) Пд. (мг.)
2А699А 5,7592 1,6954

Таблица вместилась в весь 52%-экрана, но без отступа справа, что практически не заметно.


Выводы: Таблица в 3…4 столбика будет полностью видна в окне мобильного браузера при применении, подтверждённых на примерах, условий:

  •  используйте слова с минимальным количеством букв или заменяйте на короткие синонимы;
  •  выберите шрифт с меньшей шириной (самый узкий: PT Sans Narrow);
  •  применяйте меньший (но различимый) шрифт (применив тег HTML: «small» (Допустимый для комментариев и сносок);
  •  мелкий шрифт нужен также и для многозначных (пять и выше) числовых табличных данных.
Обновлено: 23.11.2021 — 23:07

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Капча загружается...