Таблица HTML с заголовком этапа выполнения и выделенным столбцом ⇐ CSS

[Anonymous]

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


Пока мне удалось только выделить столбец. Но это не работает со строкой заголовка. Также мне нужно добавить эффект тени и степпер вверху. Моя текущая работа здесь - https://codepen.io/Sawon90/pen/qBwVmBP

Код: Выделить всё

table {
border: 1px solid black;
border-collapse: collapse;
}

.header-row {
background: #e4e4e4;
}

.col-active {
border: 3px solid red;
}

Код: Выделить всё

Step 1
Step 2
Step 3
Step 4
Step 5


First heading






Row 1
Row 1
Row 1
Row 1
Row 1


Row 2
Row 2
Row 2
Row 2
Row 2


Second heading






Row 3
Row 3
Row 3
Row 3
Row 3


Row 4
Row 4
Row 4
Row 4
Row 4

Подробнее здесь: https://stackoverflow.com/questions/782 ... ted-column