angular - 如何在引导表中的每一行下方添加水平步进器

Question

我正在尝试根据以下屏幕截图在引导表中的每一行下方添加水平步进器

https://i.stack.imgur.com/4jzKr.png

我面临的问题是在 tr 循环内，我无法为水平步进器添加 div，因为设计导致了问题。此外，没有选项可以在每行下方添加额外的行来解决此问题。

下面是代码供参考

表体代码：

<tbody style="text-align:center">
   <tr *ngFor="let row of workflowJobs">
      <td [hidden]="true">{{row.IdWF}} | {{row.WF_Code}}</td>
      <td>{{row.Code}}</td>
      <td>{{formatDate(row.Start)}}</td>
      <td>{{row.WFStatus}}</td>
      <td style="width: 160px; text-align: center">
         <button class="btn btn-sm btn-primary" tooltip="Stop">
         <i class="fa fa-stop" aria-hidden="true"></i>
         </button>
         <button [disabled]="row.WFStatus == 'Suspend'" class="btn btn-sm btn-primary" tooltip="Suspend"> 
         <i class="fa fa-pause" aria-hidden="true"></i>   
         </button>
         <button [disabled]="row.WFStatus != 'Suspend'" class="btn btn-sm btn-primary" tooltip="Resume">
         <i class="fa fa-play" aria-hidden="true"></i>
         </button>
      </td>
   </tr>
</tbody>

我有以下代码用于显示步进器：

<div class="md-stepper-horizontal orange">
    <div class="md-step active done">
      <div class="md-step-circle"><span>1</span></div>
      <div class="md-step-title">Checkout</div>
      <div class="md-step-bar-left"></div>
      <div class="md-step-bar-right"></div>
    </div>
    <div class="md-step active editable">
      <div class="md-step-circle"><span>2</span></div>
      <div class="md-step-title">Shipping</div>
      <div class="md-step-optional">Optional</div>
      <div class="md-step-bar-left"></div>
      <div class="md-step-bar-right"></div>
    </div>
    <div class="md-step active">
      <div class="md-step-circle"><span>3</span></div>
      <div class="md-step-title">Payment</div>
      <div class="md-step-bar-left"></div>
      <div class="md-step-bar-right"></div>
    </div>
    <div class="md-step">
      <div class="md-step-circle"><span>4</span></div>
      <div class="md-step-title">Review</div>
      <div class="md-step-bar-left"></div>
      <div class="md-step-bar-right"></div>
    </div>
  </div>

现在请看一下截图，让我知道有没有可能的方法来实现这个东西？PS：我正在使用打字稿进行角度编码。

任何帮助将不胜感激。

谢谢

标签： angularbootstrap-4html-tablestepper