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

Разбираемся в CSS
Ответить
Anonymous
 Таблица HTML с заголовком этапа выполнения и выделенным столбцом

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»