<table class="table table-borderless table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">اسم المرحلة</th>
        <th scope="col" class="text-left">الوصف</th>
        <th scope="col" class="text-left">نسبة الانجاز</th>
        <th scope="col" class="text-left">النسبة التثقيلية</th>
        <th scope="col" class="text-left">تاريع البدء</th>
        <th scope="col" class="text-left">مدة التنفيذ</th>
        
      </tr>
    </thead>
    <tbody>
      <tr  *ngFor="let step of steps ; index as i " >
        <th scope="row">{{i+1}}</th>
        <td> {{step.stepInfo.stepName}}
        </td>
        <td class="text-left">{{step.stepInfo.description}}</td>
        <td class="text-left">{{step.currentCompletionRatio}}</td>
        <td class="text-left">{{step.weight}}</td>
        
        <td class="text-left">{{step.stepInfo.startDate | date}}</td>
        <td class="text-left">{{step.stepInfo.duration}}</td>
      </tr>
      <tr  *ngIf="steps.length==0" >
        <th scope="row"></th>
        <td class="text-center"> </td>
        <td class="text-center"></td>
        <td class="text-center"></td>
        <td class="text-center"></td>
        <td class="text-center"></td>
        <td class="text-center"></td>
      </tr>
    </tbody>
  </table>