HTML: Адаптивная таблица

Обновлено: 17 мая, 23:20
141
Студент
79%
Завершения

Давным давно, в далёкой далёкой галактике, сотрудник компании Hexlet сделал таблицу с описанием профессий, которые представлены на сайте

Таблица с описанием профессий

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

  • Компонент уже может использоваться на многих страницах, а его шаблон не находится в отдельном файле
  • Компонент имеет корректную разметку с точки зрения семантики и переделывать её на другие теги не нужно

Второй вариант именно то, что не даст нам изменить вёрстку. Адаптируйте таблицу, используя следующие изображения и описания:

Таблица при максимальной ширине viewport в 649px

Адаптивная таблица на CSS

  • Шапка таблицы скрывается
  • У всех ячеек исчезает граница
  • Ячейки выстраиваются друг под другом
  • У каждой ячейки появляется название, которое дублирует название столбцов в шапке таблицы. Название добавляется по шаблону: Название:. После двоеточия стоит пробел
  • Цвет названия: #7a91aa и используется жирное начертание

Для реализации последнего пункта вам понадобится функция attr(), которая уже использовалась в прошлых курсах.

Добавьте перед содержимым ячейки данные из атрибута data-th. Вы так же можете соединить функцию и строку, например: content: attr(data-attr) " Hello ". Обратите внимание, что пробельные символы учитываются при выводе


Таблица при максимальной ширине viewport в 449px

Адаптивная таблица на CSS

  • Все данные центрируются
  • Из названия ячейки удаляется двоеточие
  • Размер шрифта названия ячейки: 0.8rem

Подсказки

  • Вам понадобится использовать псевдоэлементы
  • Используйте свойство display, чтобы элемент стал блочным. Для этого используется значение block

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов