I want to create a HTML table with progress steps row at the top and want to highlight the current progressed column with some border and shadow. Desired output is below-
So far I have only able to highlight the column. But it doesn't work with the header row. Also I need to add shadow effect and the stepper at the top. My current work is here - https://codepen.io/Sawon90/pen/qBwVmBP
table { border: 1px solid black; border-collapse: collapse;}.header-row { background: #e4e4e4;}.col-active { border: 3px solid red;}<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/><table class="table"><colgroup><col></col><col></col><col class="col-active"></col><col></col><col></col></colgroup><tbody><tr><td class="progress-step">Step 1</td><td class="progress-step">Step 2</td><td class="progress-step">Step 3</td><td class="progress-step">Step 4</td><td class="progress-step">Step 5</td></tr><tr class="header-row"><th>First heading</th><th></th><th></th><th></th><th></th></tr><tr><td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td></tr><tr><td>Row 2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr><tr class="header-row"><th>Second heading</th><th></th><th></th><th></th><th></th></tr><tr><td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr><tr><td>Row 4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td></tr></tbody></table>