Адаптивные таблицы: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этом разделе вы попрактикуетесь в создании адаптивных таблиц с использованием CSS. Таблицы часто представляют сложность при отображении на маленьких экранах мобильных устройств. Задания охватывают различные техники: от простого горизонтального скроллинга до полного преобразования структуры таблицы для лучшей читаемости на узких экранах. Вы будете работать с готовым HTML и заполнять пропуски в CSS коде, чтобы сделать таблицы удобными для просмотра на любых устройствах, уделяя особое внимание экранам с максимальной шириной 372px.

Список тем

Горизонтальная прокрутка для таблицы

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

CSS

.table-container {
  input1: auto;
  max-width: 100%; /* Ограничиваем ширину контейнера */
}

table {
  width: 100%;
  min-width: 500px; /* Задаем минимальную ширину таблицы, чтобы прокрутка появилась */
  border-collapse: collapse;
}

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

                     .table-container {
  input1: auto;
  max-width: 100%; /* Ограничиваем ширину контейнера */
}

table {
  width: 100%;
  min-width: 500px; /* Задаем минимальную ширину таблицы, чтобы прокрутка появилась */
  border-collapse: collapse;
}

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

HTML

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Возраст</th>
        <th>Город</th>
        <th>Профессия</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Иван</td>
        <td>Петров</td>
        <td>30</td>
        <td>Москва</td>
        <td>Инженер</td>
      </tr>
      <tr>
        <td>Мария</td>
        <td>Сидорова</td>
        <td>25</td>
        <td>Санкт-Петербург</td>
        <td>Дизайнер</td>
      </tr>
    </tbody>
  </table>
</div>

Чтобы добавить горизонтальную прокрутку, используйте контейнер вокруг таблицы (он уже есть в HTML с классом 'table-container'). Примените к этому контейнеру свойство 'overflow-x' со значением 'auto'. Это позволит полосе прокрутки появляться только при необходимости.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Медиа-запрос для стилизации таблицы

Адаптивность часто требует применения разных стилей для разных размеров экрана. Используйте медиа-запрос, чтобы изменить стиль таблицы (например, убрать внешние границы контейнера) на экранах с максимальной шириной 600px. Это подготовительный шаг к более сложным изменениям.

CSS

.table-container {
  border: 1px solid blue;
  overflow-x: auto;
  max-width: 100%;
}

table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
}

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

input1 (input2: 600px) {
  .table-container {
    border: none; /* Убираем границу на маленьких экранах */
  }
}

                     .table-container {
  border: 1px solid blue;
  overflow-x: auto;
  max-width: 100%;
}

table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
}

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

input1 (input2: 600px) {
  .table-container {
    border: none; /* Убираем границу на маленьких экранах */
  }
}

HTML

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Товар</th>
        <th>Код</th>
        <th>Цена</th>
        <th>Наличие</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ноутбук</td>
        <td>NB001</td>
        <td>50000</td>
        <td>Да</td>
      </tr>
      <tr>
        <td>Мышь</td>
        <td>MS005</td>
        <td>1500</td>
        <td>Да</td>
      </tr>
    </tbody>
  </table>
</div>

Используйте правило '@media' для определения стилей, которые будут применяться только при выполнении определенного условия. Условие для максимальной ширины экрана задается как '(max-width: 600px)'. Внутри этого правила измените или добавьте нужные стили для селектора '.table-container'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Скрытие колонок на малых экранах

Иногда на мобильных устройствах лучше скрыть менее важные колонки таблицы. Ваша задача — скрыть колонку 'Город' на экранах с максимальной шириной 600px. Используйте медиа-запрос и свойство для скрытия элементов.

CSS

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

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

/* Стили для экранов шире 600px */
.hide-mobile {
  /* По умолчанию видимы */
}

@media (input1: 600px) {
  .hide-mobile {
    input2: none;
  }
}

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

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

/* Стили для экранов шире 600px */
.hide-mobile {
  /* По умолчанию видимы */
}

@media (input1: 600px) {
  .hide-mobile {
    input2: none;
  }
}

HTML

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th class="hide-mobile">Город</th>
      <th>Профессия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван</td>
      <td>Петров</td>
      <td class="hide-mobile">Москва</td>
      <td>Инженер</td>
    </tr>
    <tr>
      <td>Мария</td>
      <td>Сидорова</td>
      <td class="hide-mobile">Санкт-Петербург</td>
      <td>Дизайнер</td>
    </tr>
    <tr>
      <td>Петр</td>
      <td>Иванов</td>
      <td class="hide-mobile">Новосибирск</td>
      <td>Врач</td>
    </tr>
  </tbody>
</table>

Внутри медиа-запроса '@media (max-width: 600px)' найдите способ выбрать все ячейки (заголовок 'th' и данные 'td'), относящиеся к колонке 'Город'. Вы можете добавить специальный класс к этим ячейкам в HTML (например, 'hide-mobile') и затем применить к этому классу свойство 'display' со значением 'none'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Преобразование таблицы в блочную структуру

Для лучшей читаемости на узких экранах таблицу можно преобразовать так, чтобы каждая строка отображалась как отдельный блок, а ячейки располагались друг под другом. Измените свойства 'display' для элементов таблицы ('table', 'thead', 'tbody', 'tr', 'th', 'td') внутри медиа-запроса для экранов с максимальной шириной 600px, чтобы добиться такого эффекта.

CSS

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

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

thead {
  /* Стили для заголовка по умолчанию */
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    input1: block;
  }

  thead tr {
    /* Скрываем заголовки таблицы, т.к. будем добавлять их к ячейкам */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px; /* Добавляем отступ между блоками строк */
  }

  td {
    /* Убираем стандартные границы ячеек, т.к. граница теперь у tr */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; /* Освобождаем место для метки */
    text-align: right; /* Выравниваем текст по правому краю */
  }
}

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

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

thead {
  /* Стили для заголовка по умолчанию */
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    input1: block;
  }

  thead tr {
    /* Скрываем заголовки таблицы, т.к. будем добавлять их к ячейкам */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px; /* Добавляем отступ между блоками строк */
  }

  td {
    /* Убираем стандартные границы ячеек, т.к. граница теперь у tr */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; /* Освобождаем место для метки */
    text-align: right; /* Выравниваем текст по правому краю */
  }
}

HTML

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Возраст</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван</td>
      <td>Петров</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Мария</td>
      <td>Сидорова</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Внутри медиа-запроса '@media (max-width: 600px)' установите 'display: block;' для элементов 'table', 'thead', 'tbody', 'tr', 'th', 'td'. Это заставит их вести себя как блочные элементы, располагаясь друг под другом.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление меток к ячейкам (data-атрибуты)

После преобразования таблицы в блоки теряются заголовки колонок. Чтобы восстановить их, можно использовать data-атрибуты в HTML и псевдоэлементы CSS. Добавьте CSS правило, которое будет отображать содержимое data-атрибута 'data-label' перед содержимым каждой ячейки 'td' на малых экранах (max-width: 600px).

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

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align: right;
    min-height: 24px; /* Минимальная высота для выравнивания */
  }

  tdinput1 {
    /* Добавляем метку из data-атрибута */
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    input2: attr(data-label);
  }
}

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

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align: right;
    min-height: 24px; /* Минимальная высота для выравнивания */
  }

  tdinput1 {
    /* Добавляем метку из data-атрибута */
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    input2: attr(data-label);
  }
}

HTML

<table>
  <thead>
    <tr>
      <th>Товар</th>
      <th>Количество</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Товар">Смартфон X</td>
      <td data-label="Количество">1</td>
      <td data-label="Цена">35000</td>
    </tr>
    <tr>
      <td data-label="Товар">Чехол</td>
      <td data-label="Количество">1</td>
      <td data-label="Цена">1000</td>
    </tr>
    <tr>
      <td data-label="Товар">Зарядка</td>
      <td data-label="Количество">2</td>
      <td data-label="Цена">1500</td>
    </tr>
  </tbody>
</table>

В HTML для каждой ячейки 'td' добавлен атрибут 'data-label'. В CSS, внутри медиа-запроса '@media (max-width: 600px)', используйте псевдоэлемент '::before' для селектора 'td'. С помощью свойства 'content' и функции 'attr(data-label)' выведите значение этого атрибута.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стилизация меток и ячеек в блочном режиме

Теперь, когда метки добавлены, улучшим их внешний вид и расположение. Сделайте текст метки (в псевдоэлементе '::before') жирным и выровняйте текст в самой ячейке 'td' по правому краю для лучшего визуального разделения метки и значения на малых экранах (max-width: 600px).

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

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    min-height: 24px;
    input1: right; /* Выравнивание текста значения */
  }

  td::before {
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    input2: bold; /* Стиль метки */
    content: attr(data-label);
  }
}

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

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    min-height: 24px;
    input1: right; /* Выравнивание текста значения */
  }

  td::before {
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    input2: bold; /* Стиль метки */
    content: attr(data-label);
  }
}

HTML

<table>
  <thead>
    <tr>
      <th>Параметр</th>
      <th>Значение</th>
      <th>Единица</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Параметр">Температура</td>
      <td data-label="Значение">22</td>
      <td data-label="Единица">°C</td>
    </tr>
    <tr>
      <td data-label="Параметр">Влажность</td>
      <td data-label="Значение">65</td>
      <td data-label="Единица">%</td>
    </tr>
  </tbody>
</table>

Внутри медиа-запроса '@media (max-width: 600px)': 1. Для селектора 'td::before' добавьте свойство 'font-weight' со значением 'bold'. 2. Для селектора 'td' добавьте свойство 'text-align' со значением 'right'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку