Давным давно, в далёкой далёкой галактике, сотрудник компании Hexlet сделал таблицу с описанием профессий, которые представлены на сайте
Появилась новая задача: таблицу нужно адаптировать под мобильные устройства, но сохранить HTML-разметку. Это самый частый тип заданий и на то бывают разные причины:
- Компонент уже может использоваться на многих страницах, а его шаблон не находится в отдельном файле
- Компонент имеет корректную разметку с точки зрения семантики и переделывать её на другие теги не нужно
Второй вариант именно то, что не даст нам изменить вёрстку. Адаптируйте таблицу, используя следующие изображения и описания:
Таблица при максимальной ширине viewport в 649px
- Шапка таблицы скрывается
- У всех ячеек исчезает граница
- Ячейки выстраиваются друг под другом
- У каждой ячейки появляется название, которое дублирует название столбцов в шапке таблицы. Название добавляется по шаблону:
Название:
. После двоеточия стоит пробел - Цвет названия:
#7a91aa
и используется жирное начертание
Для реализации последнего пункта вам понадобится функция attr()
, которая уже использовалась в прошлых курсах.
Добавьте перед содержимым ячейки данные из атрибута data-th
. Вы так же можете соединить функцию и строку, например: content: attr(data-attr) " Hello "
. Обратите внимание, что пробельные символы учитываются при выводе
Таблица при максимальной ширине viewport в 449px
- Все данные центрируются
- Из названия ячейки удаляется двоеточие
- Размер шрифта названия ячейки:
0.8rem
Подсказки
- Вам понадобится использовать псевдоэлементы
- Используйте свойство
display
, чтобы элемент стал блочным. Для этого используется значениеblock
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.