I have two issues with my CSS< first I want my timeline (the vertical line in grey with the time on top), to stop before the footer row, so it goes through the first row to the second before the last one.

Secondly, I have an issue with placing the time header on the middle of the lines. For example, the time “11:00” is more to the left then it is center, how can I fix that as well?

Here is my code:

Vue:

<template>
  <div class="calendar">
    <div class="timeline" v-if="showTimeline">
      <div>
        <div class="value">9:30</div>
        <div class="line"></div>
      </div>
    </div>
    <!-- Header -->
    <div class="calendar__header">
      <div class="calendar__header--time" v-for="item in modelValue .columnHeaders" :key="item">
        {{ item }}
      </div>
    </div>
    <!-- Body -->
    <div class="calendar__body">
      <div class="calendar__row" v-for="row in modelValue .rowData" :key="row">
        <div class="calendar__cell">{{ row.header }}</div>
        <div class="calendar__cell" v-for="item in row.values" :key="item">
          <span class="calendar__cell--value">
            <card :value="item.value" :color="item.color" v-if="item.value != ''" />
          </span>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="calendar__footer">
        <div class="calendar__cell">Total</div>
        <div class="calendar__cell" v-for="item in modelValue .footerData" :key="item">
          <span class="calendar__cell--value">
            {{ item }}
          </span>
        </div>
    </div>
  </div>
</template>
<style scoped lang="scss" src="./calendar-view.scss"></style>
<script scoped lang="ts" src="./calendar-view.ts"></script>

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;
  }
}

Here’s what it looks like right now: