как выровнять многострочный текст в качестве столбца таблицы

Question

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

и все эти значения получены из двухсторонней привязки данных внутри div в проекте angular 7 следующим образом:

<div *ngFor="let date of dates">
{{date.month}} {{date.day}} {{date.time}}
<div>

, пожалуйста, помогите мне отобразить эти значения в том же стиле.

Answer 1

Просто заставьте ваш Angular создать следующую структуру HTML:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 0 10px;
}

<div class="table">
  <div class="row">
    <span class="cell">December</span>
    <span class="cell">15,2015</span>
    <span class="cell">5 a.m.</span>
  </div>
  <div class="row">
    <span class="cell">October</span>
    <span class="cell">10, 2010</span>
    <span class="cell">6 p.m.</span>
  </div>
  <div class="row">
    <span class="cell">March</span>
    <span class="cell">12, 2012</span>
    <span class="cell">12 a.m.</span>
  </div>
</div>

В вашем Angular это было бы

<div class="table">
  <div class="row" *ngFor="let date of dates">
    <span class="cell">{{date.month}}</span>
    <span class="cell">{{date.day}}</span>
    <span calls="cell">{{date.time}}</span>
  <div>
</div>

Answer 2

раствор Stacklitz
Ниже приведен код стека для решения

CSS

.wrapper{
    display: flex;
    justify-content: space-between;
}

.colm{
  min-width:100px;
}

компонент

<div class=" row wrapper" *ngFor="let date of dates">
 <div  class="colm">{{date.month}}</div> 
 <div  class="colm">{{date.day}} </div>
 <div  class="colm">{{date.time}}</div>
<div>

Answer 3

HTML:

<div [ngClass]="'container'" *ngFor="let date of dates">
   <div>{{date.month}}</div>
   <div>{{date.day}}</div>
   <div>{{date.time}}</div>
</div>

CSS:

.container{
  width:100%;
  overflow:hidden;
}

.container > div{
  width:33.333%;
  float:left;
}

Answer 4

Вы можете просто сделать это:

<div *ngFor="let date of dates">
  <span>{{date.month}}</span><span>{{date.day}}</span><span>{{date.time}}</span>
<div>

И придать некоторый стиль этим размерам (отступы, поля) ...