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

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

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

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

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

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

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

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

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

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

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

Подсказки

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