Как сверстать гибкую таблицу с одной статичной колонкой?

Question

[Bondi]

Всем привет.
Подскажите, можно ли на чистом CSS сверстать таблицу, что бы левая её часть была(колонка 1) статична, а правая скролилась по горизонтали. При этом высота строк должна быть одинаковая слева и справа, например: информация слева заняла не 1 строчку, а 2, в таком случае такая же строка в правой части должна увеличиться по высоте.

Таблица, например: слева перечень сотрудников, а справа колонки по дням недели. И мы например закрашиваем область пересечения строки ФОИ сотрудника и определенного числа, когда он дежурит.

п/с/ я вас не запутал

Answer 1

[Шохрух Шаймардонов]

Взгляните на этот пример

Comments

[Bondi]

отличный пример! спасибо. Вот такое бы решение на grid`ах или flex`ах было бы вообще супер)

[Даниил Маслов]

Bondi, зачем нужны гриды или флексы, когда таблицы отлично подходят для таблиц?

[Шохрух Шаймардонов]

Bondi, я бы вам посоветовал почитать про семантическую верстку. Верстка должна быть корректна не только для пользователя, а еще и для браузера(и поискового робота) чтобы те могли нормально воспринимать инфу. Ибо человек с читалкой не сможет нормально поработать на сайте

[Анатолий Куликов]

Только имейте ввиду, что там используется position: sticky, посмотрите на совместимость, чтобы в будущем не появилось неожиданной проблемы.