Простая таблица в WP

Простая таблица из трёх вертикальных колонок (столбцов), составленная для WordPress не всегда корректно отображается на небольших дисплеях мобильных устройств. Иногда не вмещается полностью по ширине экрана мобильного браузера, что ограничивает видимость данных правой части таблицы. Рассмотрим наглядные примеры.

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

ДГМ в параметрических СВЧ диодах

Таблица по замыслу автора составлена правильно:
— Ширина левого столбца выбрана в 30%;
— Вторая и третья вертикальные колонки: 9 и 10% соответственно;
— Ширину всей таблицы (по ширине мобильного экрана) установим в 49%;
Проверим: 30+ 9+10(=19) = 49%:

Параметрический СВЧ диод Содержание драгоценных металлов
Золото (мг.) Серебро (мг.)
3А499А-5…Е-5* 1,6265 /1,63 (23,3964) 23,4

Таблица приняла вид: 26+12+14(=26) на 52%.
Как видим на экране мобильного браузера, размеры таблицы шире заданных. К тому же не вмещается окончание таблицы.

2. ДГМ в параметрических СВЧ диодах (от 11.2018)
Меняем часть текста и пробуем: 28+10+11 для 49%:

Параметрический СВЧ диод Содержание ДГМ
Золото (мг.) Серебро (мг.)
3А499А-5…Е-5* 1,6265 /1,63 (23,3964) 23,4

Теперь таблица приняла вид — 25+12+14(26) в 51% (Шире экрана на 2%).
Недостатки устранили, но мал отступ справа и необходимо название выделить жирным.

3. ДГМ в параметрических СВЧ диодах
Пробуем — 24+12+13(25) на 49%:

Параметрический СВЧ диод Содержание ДГМ
Золото (мг.) Серебро (мг.)
3А499А-5…Е-5* 1,6265 /1,63 (23,3964) 23,4

Хороший результат: 23+12+14 — 49% (Визуально). Название выделено жирным, но размер шрифта уменьшен. С этому недостатку будем привыкать (особенно для длинных названий).


Пример 2 (Тоже из этого сайта).

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

Задаём данные примерно: 30+ 9+10(19) на 49%:

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

Таблица приняла вид — 29+12+15 в 56%. На 7% шире экрана!
Термин «Переключательный» занял 60% экрана и не вместилась «о» 3-й колонки!

2. ДГМ в переключательных СВЧ диодах (12.2018)
Манипулируем с текстом и пробуем: 31+18= 8+10 на 49%:

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

Вид — 29+25=12+13 на 54% (49% экрана). Таблица не вместилась на 5%!

3. ДГМ в переключательных СВЧ диодах
Меняем размер букв текста «Переключательный» и пробуем: 24+25= 12+13 на 49%:

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

Реальный вид таблицы — 25+25=12+13 — 50%. Бордюр справа уже (на 1%). Это почти не заметно и не отвлекает при просмотре!

Далее рассмотрим — как разместить данные в таблицах на четыре столбца без выхода за границы экрана на мобильных устройствах.

Обновлено: 12.01.2021 — 14:13