如何在数据加载到表正文后将表头与表正文对齐

Question

我正在 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 */
}

结果：

在此处输入图像描述

Answer 1

这是您的答案的解决方案：

在.css文件中

//remove **display:block** 
// if you don't want heading in center, then apply css as below 
.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 */
}