我创建了一个有3列的表，列标题是“名称”，“年龄”和“日期”，我将这些值加到它们各自的列中，我使用span设置了一个条件。如果条件被删除，则表标题和内容是对齐的。如果条件被设置，则列标题和内容是不对齐的。 在app.component.html文件中

<div class="table-responsive">
 <table class="table table-striped">
<thead>
  <tr>
    <th class="p-1" *ngFor="let column of columns">
      {{ column }}
    </th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let value of newNames">
    <span *ngIf="value.name != 'Max'">
      <td class="p-1">
       {{value.name}}
      </td>
      <td class="p-1">
        {{value.age}}
       </td>
      <td class="p-1">
        {{value.department}}
       </td>
    </span>
    <span *ngIf="value.name == 'Max'">
      <td class="p-1">
       {{value.name}}
      </td>
      <td class="p-1">
        {{value.age}}
       </td>
      <td class="p-1">
        {{value.department + " changed to" + " IT"}}
       </td>
    </span>
  </tr>
</tbody>
</table>
</div>

在app.component.ts文件中，我添加了以下代码行。

import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
columns = ["Name", " Age", "Department"];
newNames = [
{
  name: "John",
  age: 28,
  department: "Accounting"
},
{
  name: "Max",
  age: 26,
  department: "Sports"
},
{
  name: "Rose",
  age: 24,
  department: "Arts"
}
];
} 

并且在component.scss中添加了

 @import "../styles.scss";

.table thead th {
 vertical-align: top;
 }

 th {
 white-space: nowrap;
 cursor: pointer;
 user-select: none;
 color: grey;
 }

 table {
 margin: 0;
 font-family: "Lato";
 font-size: 12px;
 }

 .table-responsive {
 min-height: 60px;
 }

 .cell {
  max-width: 250px;
 white-space: nowrap;
 overflow: hidden;
 display: inline-block;
 text-overflow: ellipsis;
 }

 .table thead th {
 vertical-align: top;
 }

谁能帮我把表格内容和表格标题对齐。