Как сделать дизайн таблиц на сайте адаптивным

 2 декабря 2018      
 HTML & CSS / JAVA & PHP / WordPress / Вебмастеру / Дизайн      
 Комментариев еще нет      
 53

В адаптивной верстке элементы меняют свой размер и положение в зависимости от ширины экрана. При этом текст в строках переносится по словам, а изображения масштабируются (сжимаются). Однако с таблицами, как правило, возникают сложности.

Я так и не нашел простого решения как сделать адаптивную таблицу. Широкие сжимались и выглядели некрасиво, а особо широкие обрезались или вылазили за границы страницы сайта.

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

Например так:

<div class="table-adaptive">
...
Здесь код нашей таблицы
...
</div>

И соответствующие классу стили:

.table-adaptive {
width: 100%;
overflow: auto;
margin: 0 0 1em;
}

Выглядеть это будет следующим образом (пример для страницы — https://moonback.ru/page/top-lowcost-vds):

Как сделать дизайн таблиц на сайте адаптивным

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

На одном сайте я подсмотрел решение на jQuery, которое позволяет обернуть любой HTML элемент необходимым вам кодом.

Например, для моего случая код будет таким:

$('table').wrap('<div class="table-adaptive"></div>');

Рабочее решение для WordPress

Если у вас WordPress, то процесс обертывания можно полностью автоматизировать. Для этого добавьте следующий код в файл functions.php вашей темы:

add_action( 'wp_footer', 'mb_adaptive_table' );
function mb_adaptive_table() {
?>
<script>
  jQuery(document).ready(function ($) {
  $('table').wrap('<div class="table-adaptive"></div>');
  });
</script>
<style>
.table-adaptive {
  width: 100%;
  overflow: auto;
  margin: 0 0 1em;
  }
</style>
<?php
}

Это решение было проверено на WordPress версии 4.9.8 и сейчас работает с текущей темой этого блога.

Данное решение в некотором роде «костыль», но оно позволяет посетителям с мобильных устройств просмотреть таблицы на вашем сайте, а сами таблицы вам не придется перекодировать под адаптивную верстку.

Рекомендую прочесть:  Асинхронная загрузка JavaScript в WordPress

С данным решением сайт проходит проверку на адаптивность в Яндекс.Вебмастере, так как теперь особо широкие таблицы не выезжают за границы сайта.

Минусы предложенного решения

Все преобразования происходят на стороне клиента. И если в браузере посетителя не работает Javascript, то «чудо не произойдет».

Благодарности

При написании статьи были использованы следующие источники:

  1. jquery.page2page.ru/index.php5/Обертывание_элементов_страницы
  2. https://wpruse.ru/finty-ushami/responsive-tables/
Поделись этой страницей с друзьями!

Прочтите это обязательно

Как включить Num Lock при загрузке Windows

Я пользуюсь дополнительной клавиатурой для ввода цифр при наборе текста. По-умолчанию в моей Windows 8.1 Num L ...

Windows windows Далее

Яндекс, домашка и порно. Как защитить детей от нежелательного контента?

Если вы думали, что слово "домашка" означает домашнее задание заданное в школе, то с точки зрения поисковой си ...

Безопасность порно юмор яндекс Далее

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

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

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2018 © Технический блог
SQL - 77 | 0,191 сек. | 9.25 МБ
доступность сайта