9.1 Прокрутка (Scroll)
Таблицы часто используются для отображения структурированных данных, но они могут быть сложными для отображения на устройствах с маленьким экраном. Адаптивные таблицы позволяют улучшить восприятие и взаимодействие с данными на различных устройствах, включая мобильные телефоны и планшеты. Рассмотрим несколько техник для создания отзывчивых таблиц.
Один из простых методов для создания адаптивных таблиц — добавление горизонтальной прокрутки. Этот метод сохраняет структуру таблицы и позволяет пользователям прокручивать данные по горизонтали на узких экранах.
Пример:
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная таблица с прокруткой</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
<th>Колонка 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
<td>Данные 3</td>
<td>Данные 4</td>
</tr>
<!-- Другие строки -->
</tbody>
</table>
</div>
</body>
</html>
Объяснение кода:
.table-container: добавляет горизонтальную прокрутку, если таблица превышает ширину контейнераtable: устанавливает ширину таблицы на 100% и объединяет границы ячеек
9.2 Скрытие колонок (Column Hiding)
Этот метод предполагает скрытие менее важных колонок на узких экранах, чтобы основные данные оставались видимыми. Это можно сделать с помощью медиа-запросов.
Пример:
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная таблица со скрытием колонок</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th class="hide">Колонка 3</th>
<th class="hide">Колонка 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
<td class="hide">Данные 3</td>
<td class="hide">Данные 4</td>
</tr>
<!-- Другие строки -->
</tbody>
</table>
</body>
</html>
Объяснение кода:
.hide: скрывает определенные колонки на экранах шириной менее 600px с помощью медиа-запросовtable: устанавливает ширину таблицы на 100% и объединяет границы ячеек
9.3. Перенос в блоки (Stacking)
Перенос в блоки превращает строки таблицы в блоки, которые отображаются друг под другом на узких экранах. Это делает таблицу более читабельной на мобильных устройствах.
Пример:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная таблица с переносом в блоки</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
<th>Колонка 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Колонка 1">Данные 1</td>
<td data-label="Колонка 2">Данные 2</td>
<td data-label="Колонка 3">Данные 3</td>
<td data-label="Колонка 4">Данные 4</td>
</tr>
<!-- Другие строки -->
</tbody>
</table>
</body>
</html>
Объяснение кода:
- Медиа-запросы: преобразуют таблицу в блочные элементы на экранах шириной менее 600px
td::before: добавляет псевдоэлемент с названием колонки перед каждым значением ячейки, чтобы сохранить контекст данных
9.4. Трансформация в карточки (Card Layout)
Этот метод предполагает преобразование каждой строки таблицы в отдельную карточку на узких экранах. Это помогает улучшить читабельность данных на мобильных устройствах.
Пример:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная таблица с карточками</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
<th>Колонка 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Колонка 1">Данные 1</td>
<td data-label="Колонка 2">Данные 2</td>
<td data-label="Колонка 3">Данные 3</td>
<td data-label="Колонка 4">Данные 4</td>
</tr>
<!-- Другие строки -->
</tbody>
</table>
</body>
</html>
Объяснение кода:
- Медиа-запросы: преобразуют таблицу в блочные элементы и создают карточки на экранах шириной менее 600px
td::before: добавляет псевдоэлемент с названием колонки перед каждым значением ячейки, чтобы сохранить контекст данных
9.5 Использование CSS Frameworks
Многие CSS-фреймворки, такие как Bootstrap, предлагают встроенные решения для создания адаптивных таблиц. Использование таких фреймворков упрощает процесс и предоставляет готовые стили и компоненты.
Пример с использованием Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная таблица с Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>Колонка 1</th>
<th>Колонка 2</th>
<th>Колонка 3</th>
<th>Колонка 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
<td>Данные 3</td>
<td>Данные 4</td>
</tr>
<!-- Другие строки -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Объяснение кода:
table.table-responsive: класс Bootstrap, который добавляет горизонтальную прокрутку для таблиц на узких экранахcontainer: класс Bootstrap для центровки и задания максимальной ширины контейнера
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ