JavaRush /Курси /Frontend SELF UA /Адаптивні таблиці

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

Frontend SELF UA

Рівень 26 , Лекція 3

Відкрита

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

Попередня Попередня лекція

Наступна Наступна лекція

Коментарі

ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ