JavaRush /Курсы /Модуль 1: Web Core /Адаптивные таблицы

Адаптивные таблицы

Модуль 1: Web Core

13 уровень , 8 лекция

Открыта

9.1 Прокрутка (Scroll)

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

Один из простых методов для создания адаптивных таблиц — добавление горизонтальной прокрутки. Этот метод сохраняет структуру таблицы и позволяет пользователям прокручивать данные по горизонтали на узких экранах.

Пример:

CSS

    
      .table-container {
        overflow-x: auto;
        width: 100%;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!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)

Этот метод предполагает скрытие менее важных колонок на узких экранах, чтобы основные данные оставались видимыми. Это можно сделать с помощью медиа-запросов.

Пример:

CSS

    
      @media (max-width: 600px) {
        .hide {
          display: none;
        }
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
      }

HTML

    
      <!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)

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

Пример:

CSS

    
      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;
        }
      }

HTML

    
      <!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)

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

Пример:

CSS

    
      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;
        }
      }

HTML

    
      <!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:

HTML

    
      <!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 для центровки и задания максимальной ширины контейнера

Предыдущая Предыдущая лекция

Следующая Следующая лекция

Комментарии (1)

ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ

Yliya Samuseva Уровень 48

13 марта 2025

В задаче адаптивная таблица есть 2 пункта, которые весьма трудно соблюсти сразу же, поскольку не указано, какие именно стили ожидаются в обязательном порядке, на этом, увы, можно потерять попытку выполнения: - Добавьте стили для заголовков таблицы. - Добавьте стили для ячеек таблицы.