Лист расписания (Angular / CSS)

Question

Я пытаюсь составить лист расписания с календарем (на неделю). Однако для начала я решил просто сделать макет в css, а потом позаботиться об остальном.

Я пытаюсь отобразить таблицу с колонкой с пользователями, строку с днями неделя en ниже этой строки a для каждого пользователя с тремя блоками (представляющими 3 такта).

Я пробовал использовать таблицы, сетки и просто поля с CSS. Я не хочу использовать таблицы, потому что, в конце концов, мне нужно сделать эту работу автоматически и сгенерировать упомянутую «таблицу» с информацией, собранной из файла или базы данных.

Итак, я собрал кое-что на CSS но я сталкиваюсь с проблемами var ios, потому что, кажется, я не могу выровнять, например, строку с днями недели с остальной частью таблицы, когда я пытаюсь выполнить эту часть информации из Колонка пользователей подходит к ряду дней.

Я живу здесь код, который я собрал до сих пор. Я должен упомянуть, что я нахожусь в процессе обучения; мой код далек от того, чтобы быть оптимальным.

Если есть кто-то, кто может помочь мне или есть какие-либо предложения. Я буду признателен за это.

Ура!

html

<ul >

    <ul class="weekdays" *ngFor="let dlist of ldays"
        [class.selected]="list === selectedList"
        (click)="onSelect(list)">
        <li>{{dlist.day}}</li>
    </ul>

    <li class="user-container" *ngFor="let list of lists"
      [class.selected]="list === selectedList"
      (click)="onSelect(list)">
      <span class="box">{{list.name}}</span>
      <div class="day-box">
      <div class="day-box" *ngIf="taken !> 3">
          <li class="taak1"></li>
          <li class="taak1"></li>
          <li class="taak1"></li>
      </div>
      <div class="day-box">
        <li class="taak1"></li>
        <li class="taak1"></li>
        <li class="taak1"></li>
      </div>
      <div class="day-box">
        <li class="taak1"></li>
        <li class="taak1"></li>
        <li class="taak1"></li>
      </div>
    </li>
</ul>`

CSS / Less

.user-container{
    height: 33px;
    border-top: 1px solid #D9E4EB;
    // border-bottom: 1px solid #D9E4EB;
    display: flex;
    margin-bottom: 0px;
    margin-top: 0px;
}

.box {
    margin: 0px;
    padding: 0px;
    width: 140px;
    border-right: 1px solid #D9E4EB;
    line-height: 32px;
    text-align: center;
    display: inline-block;
    // float: left;
}
.day-box{
    height: 33px;
    width: 90px;
    display: flex;
    border-right: 1px solid #D9E4EB;
    margin-left: 10px;
}

ul {list-style-type: none;}

.weekdays {
    margin: 0;
    padding: 0px 0;
    margin-left: 140px;
    // float: left; It goes to the left
}

.weekdays li {

    width: 91px;
    height: 33px;
    line-height: 32px;
    border-top: 1px solid #D9E4EB;
    text-align: center;
    // display: inline-block;
    border-right: 1px solid #D9E4EB;
    margin-left: 10px;
    // float: left; //without it goes back to vertical position
}