I am currently developing an Angular 7 application where I am trying to populate a table with data retrieved from a web service.
However, the issue I am facing is that the headers of the table do not align properly with the body content after loading data from this specific web service: .
Here is a snippet of my HTML code:
<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">Title</th>
<th scope="col" style="background-color: white;" class="align-middle">Message</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let alert of homeService.Alert'>
<td class="align-middle">{{ alert.name.first | uppercase }}</td>
<td class="align-middle">{{ alert.email }}</td>
</tr>
</tbody>
</table>
</div>
</div>
And here is a sample of the CSS used for fixing the header:
.fixed_header thead, tbody { display: block; }
.fixed_header tbody {
height: 450px; /* Just for the demo */
overflow-y: auto; /* Enable vertical scroll */
overflow-x: hidden; /* Hide the horizontal scrollbar */
}
Current output can be seen in the following image: enter image description here