Провести строку через таблицу, но остановиться на последней строке в CSS ⇐ CSS

[Anonymous]

У меня есть две проблемы с CSS< во-первых, я хочу, чтобы моя временная шкала (серая вертикальная линия со временем вверху) останавливалась перед строкой нижнего колонтитула, чтобы она проходила через первую строку ко второй перед последней. .
Во-вторых, у меня проблема с размещением заголовка времени в середине строк. Например, время «11:00» находится левее, чем в центре. Как это исправить?




CSS

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

.calendar {
min-height: 100%;
max-width: 100%;
}

.calendar__row {
display: flex;
align-items: stretch;
border-bottom: 1px dashed gray;
}

.calendar__header {
display: flex;
}

.calendar__cell {
box-sizing: border-box;
overflow: hidden;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid gray;
width: 20rem;
height: 4rem;
}

.calendar__header--time {
// padding-top: 10px;
width: 6%;
transform: translateX(50%);
text-align: center;
}

.calendar__header--time:first-child {
width: 16%;
flex-shrink: 0;
}

.calendar__footer {
display: flex;
background-color: #E8E9EB;
}

.calendar__cell:first-child {
width: 16%;
flex-shrink: 0;
justify-content: left;
padding: 0;
}

.calendar__footer > .calendar__cell:first-child {
justify-content: right;
font-weight: bold;
padding-right: 1rem;
}

.timeline {
position: absolute;
height: 100%;
left: 36%;
display: flex;
margin-bottom: 10px;
display: flex;
position: relative;

.line {
border-right: 3px solid gray;
height: 100%;
}

.value {
background-color: #8d8b8d;
position: relative;
border-radius: 10%;
left: 50%;
font-size: 12px;
padding: 0.2em 1em;
color: white;
}
}

Отредактируйте мою скрипку: https://jsfiddle.net/5zpkywtL/1/

Подробнее здесь: https://stackoverflow.com/questions/784 ... row-in-css