Добавлено дополнительное пространство TD в таблице Bootstrap

Question

Используя Angular 6 для отображения данных, когда у меня есть строка td с пользовательским сообщением, моя таблица Bootstrap вставляет дополнительный пустой тд после него, создавая нежелательное пространство.Строка с «test» выталкивает «EDIT» из строки.Ценю любые предложения.Ссылка на изображение вопроса ... https://ibb.co/WP7tMJr

table.teacherTable tr {
  width: 100%;
  font-size: 13px;
  border-collapse: separate;
  border-spacing: 50px 0;
  border: 0;
  margin: 0;
  padding: 0;
}

td {
  padding-right: 65px;
  margin: 0;
  border: 0;
  text-align: left;
  font-size: 13px;
  max-width: 100%;
}

td.redText {
  color: rgb(211, 32, 32);
  font-size: 13px;
}

th {
  font-size: 14px;
  font-weight: bold;
}

#teacherTableList {
  margin-top: 70px;
}

p {
  font-size: 19px;
  font-weight: bold;
}

<div class="container" id="teacherTableList">
  <p>Students Checked In/Out Today... </p>
  <table class="teacherTable" id="">
    <thead>
      <tr>
        <th>Student Name</th>
        <th>Subject</th>
        <th>Check In Time</th>
        <th>Check Out Time</th>
        <th>Edit Student Session</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let tod of studentsInToday">

        <td>{{ tod.classTimesStudentName }} </td>
        <td>{{ tod.classTimesSubjects }}</td>
        <td *ngIf="!tod.classTimesLogInRevised">{{ tod.classTimesLogInDate | date: 'medium' }}</td>
        <td *ngIf="tod.classTimesLogInRevised">{{ tod.classTimesLogInRevised | date: 'medium' }}</td>
        <td *ngIf="!tod.classTimesLogOffDate  && !tod.classTimesLogOffRevised" class="redText"> test</td>
        <td *ngIf="!tod.classTimesLogOffRevised">{{ tod.classTimesLogOffDate | date: 'medium' }}</td>
        <td *ngIf="tod.classTimesLogOffRevised">{{ tod.classTimesLogOffRevised | date: 'medium' }}</td>
        <td><a [routerLink]="['/teacher/teacheredit/', tod.classTimesRowId]">Edit</a></td>
      </tr>
    </tbody>
  </table>
</div>