Приветствую вас, дорогие друзья!

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

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

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

Однако, такой прием подходит для каких-то простых таблиц. Если же у нас таблица более сложная, например, вот такая:

То на маленьких экранах она у нас всё равно не поместится, несмотря на то, что общая ширина таблицы задана в процентах.

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

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

Делаем адаптивную таблицу при помощи медиа запроса

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

1. 1.Вычисляем класс блока, внутри которого находится таблица.
   Если вы еще не знаете как инспектировать код страницы, то вы может об этом прочитать в моей статье: Изменение темы WordPress. Определение Class и ID
2. 2.Подбираем такую ширину, начиная с которой у нас таблица уже становиться не читабельной.
3. 3.В файле стилей темы, или в файле стилей сайта, в зависимости от того, на какой CMS работает ваш сайт, пишем следующий медиа запрос:
   
   PHP

   @media screen and (max-width:400px) { #primary tr td { display:block; }

   1 2 3 4 5

   @media screen and (max-width:400px) {   #primary tr td {   display:block;    }

   Здесь мы для максимальной ширины 400 пикселей для всех ячеек таблицы указываем свойство display: block. То есть, превращаем наши ячейки из табличных элементов в блочные.

   Дело в том, что блочные и табличные элементы ведут себя по разному. В частности, блочные элементы, по умолчанию, занимают ширину 100% и располагаются друг под другом, без обтекания.

   И так как у нашей таблицы есть еще строка с заголовками столбцов, то нам нужно будет прописать еще вот такой селектор:

   PHP

   #primary tr td, #primary th { display:block; }

   1 2 3 4

   #primary tr td, #primary th  {   display:block;    }

4. 4.Сохраняем изменения и смотрим, что у нас получилось.
   

Для того чтобы сделать нашу адаптивную таблицу привлекательнее я убрала блок с названием столбцов и для первых ячеек в строке задала другой цвет фона:

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

Адаптивные таблицы с использованием специального скрипта

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

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

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

1. 1.Скачиваем следующий архив со скриптом к себе на компьютер:
   Скачать скрипт
2. 2.После скачивания и разархивирования архива у вас получится вот такой набор файлов:
   

   Файл index.html вы можете открыть в своем браузере. Он представляет собой инструкцию по работе со скриптом и его настройке.

3. 3.Закачиваем на свой сайт файл stacktable.js, который находится в папке js, и файл stacktable.css, который находится в папке css.
4. 4.В зависимости от того, как сделан у вас сайт, на CMS или без CMS, и какая у вас CMS используется, папки для загрузки этих файлов будут отличаться.

   Если у вас сайт работает на CMS, то вам нужно будет открыть папку с активной темой или шаблоном. В моем случае для сайта используется CMS WordPress, поэтому здесь мне нужно будет открыть папку:

   wp-content/themes/название-активной-темы

   js-файл загружаем в папку js, а css-файл — в папку css.

5. 5.После того, как файлы загружены, нам необходимо их подключить на самом сайте. Файл stacktable.css нам нужно будет подключить перед закрытием тега head, а файл stacktable.js перед закрытием тега body.

   Для сайта работающего на WordPress фрагмент кода отвечающий за вывод тега head находится внутри файла header.php, который расположен в папке с активной темой.

   Более подробно, о том, как подключить css к html-странице я рассказывала в этой статье.
6. 6.Для CMS WordPress есть специальная функция get_template_directory_uri(), которая позволяет в автоматическом режиме определить полный пут к папке с активной темой. Воспользуемся этой функцией и добавим следующий фрагмент кода:
   
   PHP

   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/stacktable.css">

   1	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/stacktable.css">

7. 7.Теперь тоже самое нам необходимо проделать с java-script файлом. Открываем файл footer.php, который находится в папке с активной темой. Находим тег </body> и перед ним вставляем следующий код:
   
   PHP

   <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/stacktable.js"></script>

   1	<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/stacktable.js"></script>

8. 8.Для инициализации скрипта перед закрытием тега body добавляем следующий скрипт:
   
   PHP

   <script> jQuery(document).ready(function($) { jQuery(function($){ $('#primary table').stacktable(); }); }); </script>

   1 2 3 4 5 6 7

   <script> jQuery(document).ready(function($) { jQuery(function($){ $('#primary table').stacktable(); }); }); </script>

   Здесь вам нужно вместо #primary table подставить либо тот класс таблицы, который используется у вас, либо же если для какой-то конкретной таблицы вы не задавали определенного класса, то указываем класс или идентификатор блока внутри которого находится таблица:

   ‘.class table’
9. 9.Сохраняем внесённые изменения. Теперь данный скрипт будет срабатывать для всех таблиц находящихся внутри блока с указанным классом или идентификатором.
10. 10.Так же при желании мы можем еще сделать, что бы ячейки с порядковыми номерами подсвечивались определенным цветом, а пункты, находящиеся в первом столбце выделялись жирным. Для этого в файле style.css допишем следующий код:
    PHP

    .st-head-row { background:#f1f1f1; } .st-key { font-weight:bold; }

    1 2 3 4 5 6 7

    .st-head-row { background:#f1f1f1; }   .st-key { font-weight:bold; }

11. 11.По умолчанию таблица начинает перестраиваться начиная с ширины экрана 800px. Если вам нужно это изменит, то открываем файл:
    wp-content/themes/название-темы/css/stacktable.css

    Дале находим строку

    @media (max-width: 800px)

    И вместо 800px выставляем своё значение, после чего сохраняем изменения в файле.

Видеоинструкция

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

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

На этом у меня все. Желаю вам успехов в решении проблем с адаптацией таблиц и до встречи в следующих статьях!

С уважением Юлия Гусарь