В этой статье мы расскажем вам, как создать адаптивные таблицы в WordPress, используя различные способы. Независимо от вашего опыта, у вас всегда есть возможность выбрать тот метод, который наиболее всего подходит для вас.
Почему важно создавать адаптивные таблицы
С момента, когда ваш сайт посещают пользователи с различных устройств, необходимо создать для них корректный вид всех элементов на странице. Адаптивные таблицы обеспечивают правильное отображение данных даже на устройствах с небольшими экранами, делая информацию более доступной и читаемой для всех пользователей.
Создание адаптивной таблицы с overflow
Давайте применим немного уловок. Лично я склоняюсь к тому, что это наилучший путь. Вместо того чтобы создавать громоздкую в адаптивности таблицу, мы применим более изощренный метод: создадим контейнер с определенным классом и применим к нему определенные стили.
Это позволит нам обеспечить возможность прокрутки таблицы с использованием свойства overflow в автоматическом режиме.
Создаем блок с классом table-overflow.
<div class="table-overflow"> <!-- Сюда вставить таблицу --> </div>
Добавляем в файл style.css такой стиль:
.table-overflow {
overflow-x: auto;
width: 100%;
}
Теперь, когда нужно вставить таблицу в статью, вставляйте её в ранее созданный контейнер.
<div class="table-overflow">
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
<th>Заголовок 4</th>
<th>Заголовок 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Строка-1</td>
<td>Строка-1-1</td>
<td>Строка-1-2</td>
<td>Строка-1-3</td>
<td>Строка-1-4</td>
</tr>
<tr>
<td>Строка-2</td>
<td>Строка-2-1</td>
<td>Строка-2-2</td>
<td>Строка-2-3</td>
<td>Строка-2-4</td>
</tr>
<tr>
<td>Строка-3</td>
<td>Строка-3-1</td>
<td>Строка-3-2</td>
<td>Строка-3-3</td>
<td>Строка-3-4</td>
</tr>
<tr>
<td>Строка-4</td>
<td>Строка-4-1</td>
<td>Строка-4-2</td>
<td>Строка-4-3</td>
<td>Строка-4-4</td>
</tr>
<tr>
<td>Строка-5</td>
<td>Строка-5-1</td>
<td>Строка-5-2</td>
<td>Строка-5-3</td>
<td>Строка-5-4</td>
</tr>
</tbody>
</table>
</div>
Вот эта таблица в деле. Уменьшите размер браузера, и вы увидите результат.
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 | Заголовок 5 |
|---|---|---|---|---|
| Строка-1 | Строка-1-1 | Строка-1-2 | Строка-1-3 | Строка-1-4 |
| Строка-2 | Строка-2-1 | Строка-2-2 | Строка-2-3 | Строка-2-4 |
| Строка-3 | Строка-3-1 | Строка-3-2 | Строка-3-3 | Строка-3-4 |
| Строка-4 | Строка-4-1 | Строка-4-2 | Строка-4-3 | Строка-4-4 |
| Строка-5 | Строка-5-1 | Строка-5-2 | Строка-5-3 | Строка-5-4 |
Используйте WordPress плагины для адаптивности таблиц
TablePress инструкция TablePress
В WordPress существует множество плагинов, которые упрощают создание адаптивных таблиц. Некоторые из них предоставляют дополнительные возможности форматирования и стилизации. К примеру, TablePress. Установите и активируйте плагин, создайте таблицу через интерфейс, добавьте содержимое и настройте внешний вид.
Адаптивная таблица с атрибутом data
Дошли мы к последнему методу, и это метод весьма интересный. В данном случае, мы воспользуемся скриптом, который автоматически будет подставлять значения заголовков таблицы через атрибут data-label. При этом, с помощью медиа-запросов CSS, мы адаптировали структуру таблиц, создавая аккуратные «коробочки» из строк таблицы.
Добавьте скрипт к вашему сайту с помощью любого удобного для вас метода.
<script>
document.addEventListener('DOMContentLoaded', function() {
var tableRows = document.querySelectorAll('.entry-content tbody tr');
var headerCells = document.querySelectorAll('.entry-content thead th');
tableRows.forEach(function(row) {
var cells = row.querySelectorAll('td');
cells.forEach(function(cell, index) {
var labelText = headerCells.length > index ? headerCells[index].textContent : '';
cell.setAttribute('data-label', labelText);
});
});
});
</script>
После этого внесите необходимые стили в файл style.css.
@media screen and (max-width: 900px) {
.entry-content thead {
visibility: hidden;
height: 0;
position: absolute;
}
.entry-content tr {
display: block;
margin-bottom: 1em;
}
.entry-content td {
border: 1px solid;
border-bottom: none;
display: block;
font-size: .8em;
text-align: right;
}
.entry-content td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
.entry-content td:last-child {
border-bottom: 1px solid;
}
}
Выберите подходящий для вас способ и создайте стильные и функциональные адаптивные таблицы в WordPress, которые будут хорошо выглядеть и на настольных компьютерах, и на мобильных устройствах.