html - 数据加载到表头后如何将其与表头对齐

我正在Angular 7中制作一个简单的应用程序，需要从Web服务将数据加载到表中。

问题在于，加载此Web服务https://randomuser.me/api/?results=25后，表头与表主体不对齐。

html

<div class="container-fluid" style="min-height:510px; width: 100%;">
    <div class="table-responsive" style="margin:auto;padding-top:10px;height:560px; width: 100%;">
      <table class="table table-borderless table-hover fixed_header">
        <thead style="color: black">
          <tr>
            <th scope="col" style="background-color: white;" class="align-middle">Titulo</th>
            <th scope="col" style="background-color: white;" class="align-middle">Mensaje</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor='let alerta of homeService.Alerta'>
            <td class="align-middle">{{ alerta.name.first | uppercase }}</td>
            <td class="align-middle">{{ alerta.email }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

的CSS

.fixed_header thead, tbody { display: block; }

.fixed_header tbody {
    height: 450px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

结果：

enter image description here

最佳答案

这是您答案的解决方案，

在.css文件中

//remove **display:block**
// if you dont want heading in center , the apply css as bellow
.fixed_header thead, tbody { text-align: left }


.fixed_header tbody {
    height: 450px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

希望此解决方案对您有用。如果是，请对答案进行投票