Адаптивная таблица

До этого сайта я верстал все таблицы, что называется, вручную и оптимизировал их под мобильный просмотр индивидуально. А так как здесь иногда пишут статьи жена и ребенок в визуальном редакторе (Гутенберг), то пришло время найти универсальное решение. Оказалось, существует несколько интересных адаптивных таблиц. Я объединил их все в комплект и даже внедрил на других своих сайтах, не только на этом. О том, как их можно применять любому новичку, и о том, как установить более гибкий и удобный вариант, продвинутому пользователю Вордпресса, описал в этой статье. Выбирайте, что вам по душе.

Итак, под WordPress можно найти много плагинов, которые превращают таблицы в гибкие (responsive или flexible). Этот вариант рассматривают обычно в первую очередь. Мне в целом не нравятся плагины, потому что лень разбираться, что они делают «под капотом» и они «нагружают» сайт и базу данных. А самый главный недостаток, что они применяют свое действие ко всем таблицам и применяют ограниченный круг форматов. (В настройках некоторых плагинов есть возможность указать исключающиеся классы, но что с такими табличками делать после этого?)

Я все же попробовал несколько плагинов из простых и нашел один, который в принципе меня удовлетворил своим минимализмом. Оставил его в качестве адаптивности «по умолчанию», но применяю для конкретных статей. А на основе собранной информации подготовил несколько других вариантов: на чистом CSS и через вставку шорткодов.

Обо всех этих способах, с примерами применения и для каких таблиц подходят, я расскажу ниже.

Итоговый результат для себя: шорткоды

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

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

Будем делать:

1. Вариант простой таблицы с полосой прокрутки
2. С полосой прокрутки и фиксированным левым столбцом
3. Один столбец
4. Два столбца
5. Заголовок в виде «подсказки» в углу ячейки

Параметры таблицы	id_tbl	class_div	tbl_width
Шорткод my_rstable	1	tbl1	750px

Первая таблица через шорткод. Горизонтальная прокрутка есть, фактически, всегда благодаря тому, что вордпресс сам оборачивает в figure c «overflow-x:auto;». Код варианта 1, в шорткод и в дополнительные классы прописал одно и то же. Добавил постоянную ширину в 750 пикселей, но если ширина экрана превышает 750, то таблице устанавливается ширина 100%. Смотрите на картинке ниже. Изменяйте размеры браузера, смотрите за поведением таблицы выше.

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

//шорткод настройки гибких таблиц
add_shortcode( 'my_rstable', 'dh_rstable' );
function dh_rstable($atts){
	
	$atts = shortcode_atts( array(
		'id_tbl' => 0,// номер варианта таблицы
		'class_div' =>'',//класс для обертки таблицы, если делаем в гутенберге
		'class_tbl' =>'',//класс для самой таблицы, если делаем вручную, к примеру
		'tbl_width' =>'',//точный размер таблицы, по умолчанию в пикселях, в основном для таблицы с прокруткой
		'limit_tbl' =>650 //размер экрана, при котором происходит изменение вида таблицы
	), $atts, 'my_rstable' );
	
	$tclass='';
	if($atts['class_div']==''&&$atts['class_tbl']=='') {return '';} //ни один класс не передан, значит ничего не делаем
	if($atts['class_div']!=='') {$tclass='.'.$atts['class_div'].' table';}
	if($atts['class_tbl']!=='') {$tclass='table.'.$atts['class_tbl'];}

	$tstyle='';
	switch ($atts['id_tbl']) {
    case 0:
        //не понятное что-то, ничего не делаем
        return '';
    case 1:
        //вариант простой таблицы с прокруткой, может быть с фиксированной шириной и прочими настройками
        $tstyle=$tclass.' {';
			if($atts['tbl_width']!==''){$tstyle.='width: '.$atts['tbl_width'].';';}
		$tstyle.='}';
		if((int)$atts['limit_tbl']!==0){
		$tstyle.='@media screen and (min-width: '.$atts['limit_tbl'].'px) {
			width: 100%;
		}';	
		}	
        break;
    case 2:
        //echo "i равно 2";
        break;
	};
	return '<style type="text/css" >'.$tstyle.'</style>';
} 

В шорткод можно передавать следующие параметры:

• id_tbl — пока только единичку, в качестве числа
• class_div — класс, который вы присвоили «таблице» в визуальном редакторе, то есть, по сути обертке
• class_tbl — класс, который вы присвоили непосредственно таблице, если верстаете вручную или частично вручную в режиме блока html
• tbl_width — желаемый фиксированный размер таблицы, передается строкой и может принимать не только пиксели
• limit_tbl — размер экрана, выше которого фиксация ширины отменяется. По умолчанию 650px. Передается числом в пикселях. Если не хотите, чтобы фиксация отменялась, то передавайте «нуль» в качестве параметра.

Перед таблицей выше я задал следующий шорткод: my_rstable id_tbl=1 class_div=’tbl1′ tbl_width=’750px’ limit_tbl=750

к содержанию ↑

Плагин Make Tables Responsive: настройки

По принципу простоты я отобрал пару плагинов.

Для начала я активировал плагин Automatic Responsive Tables. Он разукрасил мне все таблицы в красно-синие цвета. Прошлый век какой-то, вырви глаз. Полез в настройки, настроил ширину, цвета попроще и… все сломалось.

Тогда я его отключил. Активировал Make Tables Responsive. Такой же минимум настроек, но здесь нормально сработали и в целом подошли под таблицы в той статье, которую я писал. Рассмотрим эти настройки и в каком виде выводится в итоге табличка.

На данный момент версия плагина 1.5.3 Более 2000 установок, обновление в августе 2020, 5 звезд из 7 отзывов. Я не обращаю, чаще всего, внимание, когда последний раз обновлялся плагин, лишь бы работал. Но в данном случае, это означает, что оно тестировалось с вордпресс версии 5.4+, что хорошо. Автор: Nikolay Nikolov

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

Устанавливается плагин стандартно, ищите по наименованию, активируете. Открываем настройки, хотя, применяется он сразу же.

к содержанию ↑

Multi-Row Tables

Первая и, пожалуй, важная закладка :Multi-Row Tables. Исходя из названия, применяется для многострочных таблиц. Зачем делать однострочную таблицу, не понимаю и пока не настраивал для таких. Но настройки идентичные.

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

Дальше галочка, применять для записей и страниц. Если у вас есть таблица в виджете и вы хотите и ее адаптировать, то ставите и следующую галочку (Enable in widgets). Тут с минимальным английским все понятно ))) Enable — Это включить.

Элемент <tfoot> предназначен для выделения одной или нескольких строк, которые должны отображаться внизу таблицы. Смысл этого выделения, скорее всего, чтобы можно было применить отдельные стили. Я не применяю. В Гутенберге такой тэг появляется, если в настройках таблицы поставить «Область подвала». Зачем прятать этот «подвал» в таблице при просмотре с мобильных девайсов, не могу придумать. Галочку «Hide the tfoot tag» не стал и прятать тэг tfoot не планирую.

Следующие два параметра распределяют, какую часть экрана отдать левому столбцу и правому. Плагин, по сути, «превращает» таблицу в два столбца. В первый выводится много раз «заголовок», во второй, данные из строк. По умолчанию предлагается поделить пополам, по 49%. Если удалить значение в обоих реквизитах, то таблица станет как бы еще динамичнее, будет подстраиваться и по ширине. Я установил здесь 39 и 59%.

Флаг «Put the column names on the right side (suitable for RTL languages)» меняет местами столбцы. Заголовок тогда будет помещаться в правый столбец. Как бы, подходит для языков, читающихся справа налево. Сайт у меня на русском, флаг не устанавливаем.

Дальше идет стилизация. Галочка «Disable styling» ее отключает. Ниже выбирается цвет для нечетных «строк» и цвет линии для них же. А следующая пара для четных записей. По умолчанию установлено, что первая «строка» белая, дальше серая. Мне кажется, что таблица должна выделяться, первый блок должен быть точно не белым. Поэтому поменял местами настройку цвета. Нечетные сделал серыми, а четные светло-серыми.

Не забываем нажать Save Muli-Row Settings для сохранения настроек. Смотрим ниже, что у меня получилось (в виду того, что в итоге я плагин на этой странице не применяю, результат будет только в виде картинки).

Номер строки	Краткое описание	Дополнительно	Подробности
1	Это первая строка	Еще немного текста	В первой строке пишем про первую строку. Третья, пятая и далее все нечетные будут отображаться так же, как первая.
2	А здесь вторая строка	И здесь другой текст	Стиль второй строки будет применяться для всех четных строк. Чередование стилей повышает читабельность таблицы, чтобы блоки, в которые превращаются строки, визуально отличались друг от друга.

к содержанию ↑

Single-Row Tables

На закладке Single-Row Tables для однострочной таблицы добавляется параметр «Enable for tables with at least 4 columns», то есть, применять адаптивность для таблиц, у которых не менее 4 столбцов.

Дальше параметр «Layout» устанавливает, в какой вид превращать. 2 похожих столбца, 3, 4 или гибкая система. Align cell content — какое выравнивание в ячейке установить: не менять к левой краю, к правому, по центру. Я оставил все, как было. Смотрим, что получается ниже.

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

Не должна никак меняться

Столбец 1

Столбец 2

Столбец 3

Столбец 4

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

к содержанию ↑

Global Settings

Закладка «Global Settings» содержит настройки, которые влияют на то, к каким таблицам будет применен плагин.

Disable by class of the table tag — не применять для классов тэга «таблица» (ввести список без точек, через запятую!). Пригодится ниже, когда настроим некоторые классы для таблицы, чтобы адаптировались по иному.

Disable by ID of the table — можно исключить по конкретным таблицам, но у них нужно установить id. Понадобится, используем.

Disable by post and page — отключаем для конкретных записей или страниц. Опять же, по ID записи\страницы.

Enable ONLY in post and page — в этом случае будет применяться ТОЛЬКО для перечисленных записей или страниц. Сложнее следить, хотя… пока оставляю пустым.

к содержанию ↑

Существенный минус плагина

Плагин настроен. Он позволяет указать классы исключения, чтобы адаптировать некоторые таблицы по иному. Но здесь нас ждет засада. В визуальном редакторе Gutenberg можно прописывать дополнительные классы к блокам (справа в разделе Дополнительно), но, в случае с таблицей, класс цепляется к блоку figure. А если прописать в режиме редактора кода, то при возвращении в визуальный увидим предупреждение «Этот блок имеет неожидаемое или неверное содержание». Не нравится ему наше изменение. Можно на это не обращать внимание или перевести блок в вид «HTML», но тогда уж проще и верстать сразу в этом блоке. Так что, обычным пользователям Вордпресса либо смириться, что таблицы будут адаптироваться одним способом, либо переходить на корректировку в стиле html. Либо применять описанные ниже способы.

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

<!-- wp:group {"className":"tbl_div"} -->
<div class="wp-block-group tbl_div"><div class="wp-block-group__inner-container"><!-- wp:table -->
<figure class="wp-block-table rstbl10"><table><tbody><tr><td>Январь</td>

А нам нужно, чтобы было вот так как-то:

<!-- wp:group {"className":"tbl_div"} -->
<div class="wp-block-group tbl_div"><div class="wp-block-group__inner-container"><!-- wp:table {"className":"rstbl10"} -->
<figure class="wp-block-table"><table class="rstbl10"><tbody><tr><td>Январь</td>

Был еще вариант. Сделать свои классы так, чтобы они срабатывали после плагина. То есть, если в настройках Make Tables Responsive стоит 651 пиксель, то для прочих вариантов ставим срабатывание после 649 (в настройках 651, плагин включается на 650)! Но эксперименты показали, что слишком много стилей придется перепрописывать и он применяет «!important»

Поэтому, окончательное решение: плагин оставить и применять для отдельных страниц. А остальное сделать своими настройками.

к содержанию ↑

Длинные таблицы с полосой прокрутки

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

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

Чтобы полоса была принудительно, нужно обернуть, по советам в интернетах, таблицу в блок div и задать блоку свойство «overflow-x:auto;». Гутенберг по умолчанию уже обертывает таблицу в блок figure, у которого это свойство имеется, так что ничего добавлять для этого не будем.

Если поправим, как нам нужно, то при возвращении к визуальному режиму получим надпись «Этот блок имеет неожидаемое или неверное содержание ( Да и класс у дива получается у верхнего, а не у вложенного).

к содержанию ↑

Простой вариант прокрутки

Январь	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31
Температура
Влажность
Ветер

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

Таблица	Определенный размер	800 px	Для примера
Лучше бы	Устанавливать ширину столбцов фиксированной, но сложновато определять из-за разного количества столбцов	Но можно в процентах для нескольких первых	Или все одинаковые, что вряд ли сильно востребовано

Устанавливаем ширину через вставку HTML. Как на картинке ниже. Есть такой блок в редакторе Гутенберг.

Если хотите использовать такой вариант, то вставьте в блок html код:

<style type="text/css">   
 .tbl_v1 table, table.tbl_v1 {
        width: 800px;
    }
</style>

Он будет применяться на конкретной странице. Либо вставьте без первой и последней строки в файл со стилями, но тогда будет применяться на каждой странице, что не очень гибко, на мой взгляд.

к содержанию ↑

Фиксированный заголовок слева

Еще я нашел такую фишку, когда шапка таблицы становится левым столбцом и не сдвигается при прокрутке и реализовал под нее два класса. Но тут важно помнить, что у таблицы обязательно должна быть шапка (тэг thead). Для этого в визуальном редакторе переключаем ползунок «Область заголовка».

Заголовоки	Первый	Второй	Третий
фффф	1	2	3
ffff	11	12	13
sss

Класс tbl_v2 применяется всегда, не зависимо от размера экрана. Просто появляется полоса прокрутки при уменьшении. При этом, нужно учитывать, что размер ячейки получается разный и верстка может съезжать (( лучше смотрится, когда столбцов немного, а строк как раз побольше. Вставляйте код ниже в блок html или в файл стилей без первой и последней строк. Ширина столбцов фиксированная — 160px. Можете подогнать под свою таблицу заменив «160» в строке «width: 160px;».

<style>
/* tbl_v2 таблица с горизонтальной прокруткой шапка всегда слева*/
    .tbl_v2 table, table.tbl_v2 {
        display: block;
        width: 100%;
    }
    .tbl_v2 table thead, table.tbl_v2 thead,
    .tbl_v2 table tbody, table.tbl_v2 tbody,
    .tbl_v2 table thead th, table.tbl_v2  thead th{
        display: block;
    }
    .tbl_v2 table thead, table.tbl_v2  thead{
        float: left;
    }
    .tbl_v2 table tbody, table.tbl_v2  tbody{
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .tbl_v2 table td, .tbl_v2 table th, table.tbl_v2 td, table.tbl_v2 th {
        padding: 10px 2px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 160px;
        font-size: 13px;
        text-overflow: ellipsis;
    }
    .tbl_v2 table thead th, table.tbl_v2 thead th {
        text-align: center;
    }
    .tbl_v2 table tbody tr, table.tbl_v2  tbody tr {
        display: table-cell;
    }
    .tbl_v2 table tbody tr:nth-child(odd), table.tbl_v2  tbody tr:nth-child(odd) {
        background: none;
    }
    .rtbl_v2 table tr:nth-child(even), table.tbl_v2 tr:nth-child(even){
        background: transparent;
    }
    .tbl_v2 table tr td:nth-child(odd), table.tbl_v2 tr td:nth-child(odd) {
        background: #F8F8F8;
        border-right: 1px solid #E6E4E4;
    }
    .tbl_v2 table tr td:nth-child(even), table.tbl_v2 tr td:nth-child(even) {
        border-right: 1px solid #E6E4E4;
    }
    .tbl_v2 table td, table.tbl_v2  td{
        display: block;
        text-align: center;
    }
</style>

к содержанию ↑

Фиксированный заголовок на малых экранах

Устройства	Количество	Используются	В ремонте
Прибор1	20	10	5
Прибор2	10	3	6
Прибор3	4	3	1
Прибор4	1	1	0
Прибор5	1	1	0
Прибор6	1	1	0
Прибор7	5	1	4

Для класса tbl_v3 адаптивность срабатывает при ширине экрана 650 пикселей. Класс можно устанавливать как для самой таблице, так и для обертки Figure (то есть, в визуальном редакторе). Если вы верстаете таблицы вручную, то для этих вариантов добавляйте обертку div с свойством «overflow-x:auto;»

<style>
/* tbl_v3 таблица с горизонтальной прокруткой настройки из tbl_v2 применяются при малом экране*/
@media (max-width: 650px) {
    .tbl_v3 table, table.tbl_v3 {
        display: block;
        width: 100%;
    }
    .tbl_v3 table thead, table.tbl_v3 thead,
    .tbl_v3 table tbody, table.tbl_v3 tbody,
    .tbl_v3 table thead th, table.tbl_v3  thead th{
        display: block;
    }
    .tbl_v3 table thead, table.tbl_v3  thead{
        float: left;
    }
    .tbl_v3 table tbody, table.tbl_v3  tbody{
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .tbl_v3 table td, .tbl_v3 table th, table.tbl_v3 td, table.tbl_v3 th {
        padding: 10px 2px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 160px;
        font-size: 13px;
        text-overflow: ellipsis;
    }
    .tbl_v3 table thead th, table.tbl_v3 thead th {
        text-align: center;
    }
    .tbl_v3 table tbody tr, table.tbl_v3  tbody tr {
        display: table-cell;
    }
    .tbl_v3 table tbody tr:nth-child(odd), table.tbl_v3  tbody tr:nth-child(odd) {
        background: none;
    }
    .rtbl_v3 table tr:nth-child(even), table.tbl_v3 tr:nth-child(even){
        background: transparent;
    }
    .tbl_v3 table tr td:nth-child(odd), table.tbl_v3 tr td:nth-child(odd) {
        background: #F8F8F8;
        border-right: 1px solid #E6E4E4;
    }
    .tbl_v3 table tr td:nth-child(even), table.tbl_v3 tr td:nth-child(even) {
        border-right: 1px solid #E6E4E4;
    }
    .tbl_v3 table td, table.tbl_v3  td{
        display: block;
        text-align: center;
    }
}
</style>	

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

к содержанию ↑

Вертикальная таблица в один столбец

Если у вас не много столбцов, но в ячейках много текста, то рассмотрите вариант «один столбец» с классом tbl_v4.

Вид таблицы	Описание	Доп информация
Одна строка, длинная табличка	Можно сделать через плагин Make Tables Responsive. Но в целом сам Вордпресс должен справиться с такими нормально.	Сложно представить, где удобно применять.
Много столбцов, мало строк	Точно подходит «родной» вариант от WordPress. Ничего менять не нужно.
Мало столбцов, много строк	Можно сворачивать в один столбец, в два столбца или делать совсем на flex, как себе хочется. Чаще всего в таких случаях придется верстать таблицу самому.	Тут много вариантов

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

<style>
/*tbl_v4 сворачивает в один столбец */
@media screen and (max-width: 650px) {
	table.tbl_v4 tr, .tbl_v4 table tr {
		display: block;
		margin-bottom: 30px;
		background-color: #f8f8f8;
	}
	table.tbl_v4 th, table.tbl_v4 td, .tbl_v4 table th, .tbl_v4 table td{
		display: block;
		text-align: center;
	}
}
</style>

Как и для других таблиц или вставляете код в блок Html или без строк «<style>» и «</style>» в файл css (стилей).

Шапка и «строки» в сером цвете, а между ними отступы, где «проглядывает» общий фон. Если он у вас не подходящий, добавьте строку для определения цвета всей таблицы после «@media screen and (max-width: 650px) {«

	table.tbl_v4, .tbl_v4 table{
		background-color: #ffffff;
	}

к содержанию ↑

Вертикальная таблица в два столбца

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

Тем, кто изначально верстает в обычном редакторе, будет легче. Нужно всего лишь добавить к ячейкам атрибуты data-label. Для остальных. Формируем нужную нам таблицу в визуальном редакторе, потом переходим в редактирование в HTML (смотрите картинку ниже, только у меня русский в админке частично слетел, так что у вас, вероятно, будет «Редактировать как HTML»):

И в этом режиме к элементам <td> приписываем data-label=»Заголовок 1″, дальше так же заголовок второй и далее внутри одного блока <tr>. Муторно и можно легко ошибиться, поэтому я взялся за шорткоды, чтобы заголовок вставлялся в качестве атрибута автоматически. То есть, имитирую работу плагина. Но зато, в ручном режиме мы можем в мобильный вариант вставить краткие заголовки, а не копировать наши.

Таким образом, мы пропускаем шапку (первую строку от <tr> или <th> до </tr> или </th>), а в каждой следующей строке в ячейках (td) прописываем data-label. Попробуйте, несколько, для тренировки. Но, после того, как мы это сделаем, Гутенберг нас отругает и предложит либо исправить, либо конвертировать в HTML. Мучаемся дальше, конвертируем и дальше заканчиваем верстать, если не сразу все сделали, в этом формате. Заодно, в этот же блок и стили можно будет добавить. Если не прописывать атрибуты, то таблица будет в один столбец, чтобы это продемонстрировать, специально не стал вставлять data-label во все ячейки.

Смотрим результат. На мониторах изменяем ширину окна браузера:

Заголовок таблицы 1	Заголовок таблицы 2	Заголовок таблицы 3	Заголовок таблицы 4
Адаптируем	Адаптируем2	Еще адпатируем	А здесь текст побольше
Тест 1	Тест 2	Тест, тест, тест, тест, тест 3	Тест, тест, тест, тестирование 4
Пробуем	Еще пробуем	Еще и еще	Ну и последняя проба

Код для вставки стиля (пятый вариант):

<style>
/*tbl_v5 сворачивает в один столбец но, если прописаны заголовки в дата, то получаем, как в плагине*/
table.tbl_v5, .tbl_v5 table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table.tbl_v5 tr, .tbl_v5 table tr {
		background-color: #f8f8f8;
}

table.tbl_v5 th, .tbl_v5 table th
table.v5 td, .tbl_v5 table td{
		text-align: left;
	 	padding: 8px;
	border: 1px solid #ddd;
}
@media screen and (max-width: 650px) {
	table.tbl_v5, .tbl_v5 table{
		border: 0;
  	}

  
  
  	table.tbl_v5 thead, .tbl_v5 table thead {
	    border: none;
	    clip: rect(0 0 0 0);
	    height: 1px;
	    margin: -1px;
	    overflow: hidden;
	    padding: 0;
	    position: absolute;
	    width: 1px;
  	}
  
  	table.tbl_v5 tr, .tbl_v5 table tr {
    	border-bottom: 1px solid #ddd;
    	display: block;
   		margin-bottom: 30px;
  	}
  
	table.tbl_v5 td, .tbl_v5 table td {
    	display: block;
    	text-align: right;
	}
  
	table.tbl_v5 td::before, .tbl_v5 table td::before{
	    content: attr(data-label);
	    float: left;
	    font-weight: bold;
	    text-transform: uppercase;
	}
  
  	table.tbl_v5 td:last-child, .tbl_v5 table td:last-child{
    	border-bottom: 0;
  	}
}
</style>

к содержанию ↑

Гибкий вариант

Пожалуй, самый гибкий вариант, но требует еще больше ручного труда, по сравнению с двумя столбцами. Способ на Flex сворачивает ячейки до двух на строку (что не очень красиво при нечетных столбцах) при 768 px, а потом на одну при 480. Для наглядности проверим на нескольких таблицах (4 столбца и 5). Красивый вариант.

Вариант в синем цвете, класс применяется к самой таблице:

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
Заголовок адынТекст 11	Текст 21	Текст 31	Текст 41
Текст 12	Текст 22

Следующая таблица состоит из нечетного количества столбцов и, возможно, вам не так понравится, как верхняя. Цвет зеленый и класс tbl_v6 применяется к figure. А еще классы построены по принципу mobile first, то есть, по умолчанию применяются стили для малых экранов, как нравится Гуглу 🙂

первый заголовок	Заголовок 2	З3	Заг4	Заголовок 5
первый	второй	третий	четвертый	пятый
Заголовок двавторая строка первая ячейка. строка длинная	Заголовок тривторая строка 2	2 строка 3	2 строка 4	2 строка 5
третья строка	3 строка еще	3 строка 3	3 строка 4	третья строка пятая ячейка
а тут еще и четвертая строка

Код стиля для файла или блока html

<style>
table.tbl_v6, .tbl_v6 table {
    border-radius: 5px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}
table.tbl_v6 th, table.tbl_v6 td, .tbl_v6 table th, .tbl_v6 table td {
    padding: 10px 20px;
    font-size: 13px;
    border: none;
    font-family: Verdana, sans-serif;    
    border: 1px solid #337AB7;
    vertical-align: top;
    margin: 0 -1px -1px 0;
    padding-left: 1%;
    padding-right:1%; 
    padding-top: 35px;
    position: relative;
    width: 100%;	
}
table.tbl_v6 th, .tbl_v6 table th {
    color: #FFF;
    background: #02722b;
    font-weight: bold;
    border: 1px solid #1a4a73;    
    text-transform: uppercase;    
    text-align: center;    
}
table.tbl_v6 tr:nth-child(even), .tbl_v6 table tr:nth-child(even) {
    background: #98fb98;
}
table.tbl_v6 td span, .tbl_v6 table td span {
    background: #02722b;
    color: #FFF;
    display: none;
    font-size: 11px;
    font-weight: bold;
    font-family: Verdana, sans-serif;    
    text-transform: uppercase;        
    padding: 5px 10px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;    
}
table.tbl_v6 thead, .tbl_v6 table thead {
        display: none;
}
table.tbl_v6 tr, .tbl_v6 table tr {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-bottom: 30px;
}
@media(min-width: 768px) {
    table.tbl_v6 thead, .tbl_v6 table thead {
        display: table-header-group;;
    }
    table.tbl_v6 tr, .tbl_v6 table tr {
        display: table-row;
        margin-bottom: 0px;
    }
    table.tbl_v6 td, .tbl_v6 table td {
	display: table-cell;
        margin: 0 0;
        padding: 10px 20px;
        position: relative;
        width: auto;
    }
    table.tbl_v6 td span, .tbl_v6 table td span {
        display: none;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px){
    table.tbl_v6 td, .tbl_v6 table td {
        width: 47%;
    }
	
}
</style>

А это код самой таблицы, для примера. Редактировать его приходится так же в режиме html (см. выше, как это делать).

<figure class="wp-block-table tbl_v6">
  <table>
     <thead>
       <tr><th>первый заголовок</th><th>Заголовок 2</th><th>З3</th> 
       <th>Заг4</th><th>Заголовок 5</th></tr>
     </thead>
     <tbody>
       <tr><td>первый</td><td>второй</td><td>третий</td><td>четвертый</td><td>пятый</td>
       </tr>
       <tr><td><span>Заголовок два</span>вторая строка первая ячейка. строка длинная</td><td><span>Заголовок три</span>вторая строка 2</td><td>2 строка 3</td><td>2 строка 4</td><td>2 строка 5</td>
       </tr>
       <tr><td>третья строка</td><td>3 строка еще</td><td>3 строка 3</td><td>3 строка 4</td><td>третья строка пятая ячейка</td>
       </tr>
       <tr><td>а тут еще и четвертая строка</td><td></td><td></td><td></td><td></td>
       </tr>
     </tbody>
  </table>
</figure>