时间戳

首页 > 解决方案 > 同一行中的不同数据

html - 同一行中的不同数据

问题描述

我在将不同的数据呈现为一行时遇到问题。当我收集数据并用一些数组包装它时。但结果看起来很糟糕。这是一个片段：

<div class="table-responsive">
    <table
      class="table table-bordered"
      [ngStyle]="{ height: tableHeight + 'px' }"
    >
      <thead>
        <tr>
          <th>Цаг</th>
          <th>Үйлдлүүд</th>
          <th>Тасалбарууд</th>
          <th>Үйлчилгээ</th>
          <th>Гүйлгээ</th>
        </tr>
      </thead>
      <tbody [ngStyle]="{ height: tableHeight + 'px' }">
        <tr *ngFor="let event of events">
          <td>
            <div>
              <span class="mr-5">{{
                event?.createdAt | date: "hh:mm:ss"
              }}</span>
              <span class="mr-5"
                >{{ event?.type.kind }}
                {{ event?.type.item }}
                {{ event?.type.action }}
                {{
                  event?.type.kind == "TICKET" ? "-" + event?.ticketNumber : ""
                }}
              </span>
              <span class="mr-5">{{ event?.duration | secondToTime }}</span>
              <span class="mr-5"
                >{{ event?.hall }} - {{ event?.windowNumber }}</span
              >
            </div>
          </td>
        </tr>
        <tr *ngFor="let ticketEvent of ticketEvents">
          <td>
            <div>
              <span class="mr-5">{{
                ticketEvent?.calledAt | date: "hh:mm:ss"
              }}</span>
              <span class="mr-5">{{
                ticketEvent?.endAt | date: "hh:mm:ss"
              }}</span>
              <span class="mr-5">{{ ticketEvent?.number }}</span>
              <span class="mr-5">{{
                ticketEvent?.waitedDuration | secondToTime
              }}</span>
              <span class="mr-5">{{
                ticketEvent?.servedDuration | secondToTime
              }}</span>
              <span class="mr-5">{{
                ticketEvent?.introspectDuration | secondToTime
              }}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

但我的结果是：

在此处输入图像描述 我想要的是数据应该在一行中，但包含不同的数据。我究竟做错了什么 ？

标签： htmlhtml-table

解决方案

试着把它放在 tr

<td>
    <span class="mr-5">
        {{event?.createdAt | date: "hh:mm:ss"}}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.type.kind }}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.type.item }}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.type.action }}
    </span>
</td>
<td>
    <span class="mr-5">
        {{event?.type.kind == "TICKET" ? "-" + event?.ticketNumber : ""}}
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.duration | secondToTime }}    
    </span>
</td>
<td>
    <span class="mr-5">
        {{ event?.hall }} - {{ event?.windowNumber }}   
    </span>
</td>

推荐阅读