Зачем оптимизировать таблицы для мобильных
Таблицы — одна из главных проблем мобильной версии сайта. Таблица, которая идеально выглядит на десктопе с шириной 1200px, на экране 360px превращается в нечитаемое месиво: столбцы сжимаются до нескольких пикселей, текст переносится по буквам, данные невозможно сопоставить. Или ещё хуже — таблица выходит за границы экрана, появляется горизонтальная прокрутка всей страницы.
Для SEO это проблема поведенческих факторов. Пользователь открыл страницу с прайс-листом или сравнительной таблицей, не смог прочитать данные на мобильном — ушёл. Время на странице падает, показатель отказов растёт, конверсия снижается. Для сайтов с прайс-листами, каталогами, техническими спецификациями — таблицы часто являются ключевым контентом, ради которого пользователь пришёл.
Google Lighthouse проверяет, не выходят ли элементы за границы viewport. Таблица без мобильной адаптации — типичная причина предупреждения «Content is wider than the viewport» в разделе Best Practices. Яндекс в своих рекомендациях также указывает на необходимость корректного отображения всех элементов на мобильных.
Пошаговая инструкция
Шаг 1. Определите типы таблиц на сайте
Не все таблицы одинаковы. Способ адаптации зависит от типа данных:
- Простые таблицы (2-3 столбца). Прайс-лист: услуга, цена. Или: параметр, значение. Обычно помещаются на мобильном экране без специальной адаптации при правильной стилизации.
- Средние таблицы (4-5 столбцов). Сравнение тарифов, технические характеристики. Требуют адаптации — не влезают в 360px.
- Широкие таблицы (6+ столбцов). Сравнительные таблицы, отчёты, сводки. Требуют серьёзной переработки для мобильных.
- Таблицы с длинным текстом. Ячейки содержат абзацы текста. На мобильных текст в узких ячейках нечитаем.
Пройдите по сайту и составьте список всех страниц с таблицами. Для каждой определите тип и текущее состояние на мобильных.
Шаг 2. Примените горизонтальную прокрутку для таблиц
Самый простой и универсальный способ — обернуть таблицу в контейнер с горизонтальной прокруткой. Таблица сохраняет свою структуру, но пользователь может прокручивать её влево-вправо:
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Москва</th>
<th>СПб</th>
<th>Регионы</th>
</tr>
</thead>
<tbody>
<tr>
<td>Базовый</td>
<td>75 000 ₽</td>
<td>55 000 ₽</td>
<td>50 000 ₽</td>
</tr>
</tbody>
</table>
</div>
<style>
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
margin: 0 -16px; /* компенсация боковых padding */
padding: 0 16px;
}
.table-responsive table {
min-width: 600px; /* таблица не сжимается уже минимума */
width: 100%;
border-collapse: collapse;
}
</style>Преимущества: простая реализация, сохраняется структура таблицы, работает для любого количества столбцов. Недостаток: пользователь может не заметить, что таблица прокручивается. Решение — добавьте визуальную подсказку:
/* Тень справа — индикатор прокрутки */
.table-responsive {
position: relative;
}
.table-responsive::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
pointer-events: none;
}Шаг 3. Перестройте в карточки для средних таблиц
Для таблиц с 4-5 столбцами эффективный подход — перестроение строк таблицы в карточки на мобильных. Каждая строка становится отдельным блоком, столбцы — строками внутри блока:
<style>
@media (max-width: 768px) {
.card-table thead {
display: none; /* скрываем заголовок таблицы */
}
.card-table tr {
display: block;
margin-bottom: 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 12px 16px;
}
.card-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border: none;
border-bottom: 1px solid #f0f0f0;
}
.card-table td:last-child {
border-bottom: none;
}
/* Показываем заголовок столбца через data-атрибут */
.card-table td::before {
content: attr(data-label);
font-weight: 600;
margin-right: 16px;
flex-shrink: 0;
}
}
</style>HTML таблицы с data-label:
<table class="card-table">
<thead>
<tr>
<th>Тариф</th>
<th>Москва</th>
<th>СПб</th>
<th>Регионы</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Тариф">Базовый</td>
<td data-label="Москва">75 000 ₽/мес</td>
<td data-label="СПб">55 000 ₽/мес</td>
<td data-label="Регионы">50 000 ₽/мес</td>
</tr>
</tbody>
</table>Преимущества: отличная читаемость на мобильных, не нужен горизонтальный скролл. Недостаток: теряется возможность сравнения строк между собой (данные в разных карточках). Подходит для таблиц, где пользователь ищет информацию по конкретной строке (тарифу, услуге), а не сравнивает строки.
Шаг 4. Зафиксируйте первый столбец для широких таблиц
Для сравнительных таблиц (6+ столбцов) эффективный приём — фиксация первого столбца при горизонтальной прокрутке. Пользователь всегда видит названия строк, прокручивая столбцы с данными:
<style>
@media (max-width: 768px) {
.sticky-col-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sticky-col-table table {
min-width: 800px;
}
.sticky-col-table th:first-child,
.sticky-col-table td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 1;
min-width: 120px;
box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}
}
</style>Этот подход сохраняет возможность сравнения данных между столбцами, потому что пользователь видит заголовки строк при прокрутке.
Шаг 5. Проверьте на минимальном разрешении
Стандартная минимальная ширина для тестирования — 320px (iPhone SE, старые модели Android). Если таблица корректно отображается на 320px — она будет работать на всех устройствах.
Что проверять:
- Текст в ячейках читаем — не обрезан, не переносится по буквам.
- Таблица не вызывает горизонтальную прокрутку всей страницы (только внутри контейнера .table-responsive).
- Если используется перестроение в карточки — все данные видны, подписи (data-label) отображаются корректно.
- Если используется горизонтальная прокрутка — есть визуальный индикатор (тень, стрелка).
- Интерактивные элементы в ячейках (кнопки, ссылки) имеют touch target не менее 48px.
Шаг 6. Обработайте таблицы в контенте WordPress
В WordPress таблицы часто создаются через визуальный редактор или блок Table в Gutenberg. Эти таблицы не адаптивны по умолчанию. Решения:
Глобальное CSS-решение. Добавьте в стили темы обёртку для всех таблиц в контенте:
/* Все таблицы в контенте статей — адаптивные */
.entry-content table {
width: 100%;
border-collapse: collapse;
}
@media (max-width: 768px) {
.entry-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}JavaScript-обёртка. Автоматически оборачивайте все таблицы в div.table-responsive:
document.querySelectorAll('.entry-content table').forEach(function(table) {
if (!table.parentElement.classList.contains('table-responsive')) {
var wrapper = document.createElement('div');
wrapper.classList.add('table-responsive');
table.parentElement.insertBefore(wrapper, table);
wrapper.appendChild(table);
}
});Это решает проблему для всех существующих и будущих таблиц без ручного редактирования каждой страницы.
Шаг 7. Рассмотрите альтернативы таблицам
Иногда лучшая адаптация таблицы — это замена таблицы на другой формат:
- Список определений (dl/dt/dd). Для таблиц «параметр — значение» вместо двух столбцов используйте список определений. Естественно адаптируется под мобильные.
- Аккордеон. Для сравнения тарифов: каждый тариф — отдельный блок
<details>, внутри — параметры. Пользователь раскрывает нужный. - Визуальные карточки. Для прайс-листов: каждая услуга — карточка с названием, описанием, ценой. На мобильных карточки располагаются вертикально.
Типичные ошибки
- Таблица без обёртки — горизонтальная прокрутка всей страницы. Самая частая ошибка. Широкая таблица выходит за viewport, и прокручивается не таблица, а вся страница. Пользователь теряет контроль над навигацией. Всегда оборачивайте таблицы в контейнер с overflow-x: auto.
- Скрытие столбцов на мобильных.
display: noneдля «неважных» столбцов. Пользователь не видит часть данных. Если столбец настолько неважен, что его можно скрыть — может, он не нужен и на десктопе? - Текст размером 10-12px в ячейках. Чтобы таблица «влезла» на мобильный экран, уменьшают шрифт до нечитаемого. Лучше использовать горизонтальную прокрутку или перестроение в карточки.
- Фиксированная ширина столбцов в пикселях.
width: 200pxдля столбца — на экране 360px такая таблица не поместится. Используйте проценты или min-width. - Отсутствие визуального индикатора прокрутки. Таблица с горизонтальной прокруткой, но пользователь не знает, что можно скроллить. Данные за правым краем — невидимы. Добавьте тень или подсказку.
- Перестроение в карточки для всех таблиц. Для простых таблиц из 2 столбцов перестроение в карточки — избыточно и может ухудшить читаемость. Выбирайте способ адаптации в зависимости от типа таблицы.
Что проверить в итоге
- Все таблицы на сайте проверены на мобильном устройстве (320-360px).
- Ни одна таблица не вызывает горизонтальную прокрутку всей страницы.
- Для простых таблиц (2-3 столбца) — корректное отображение без адаптации или с минимальной стилизацией.
- Для средних таблиц (4-5 столбцов) — перестроение в карточки или горизонтальная прокрутка контейнера.
- Для широких таблиц (6+ столбцов) — горизонтальная прокрутка с фиксированным первым столбцом.
- Есть визуальный индикатор возможности прокрутки (тень, стрелка).
- Текст в ячейках читаем — не менее 14px, не обрезан.
- В WordPress — глобальное CSS/JS решение для автоматической обёртки таблиц в контенте.
- Интерактивные элементы в таблицах (кнопки, ссылки) имеют touch target не менее 48px.
- Рассмотрены альтернативы таблицам для мобильных: списки, аккордеоны, карточки.
