I am trying to display a scrollable table list with a fixed header, but I'm having issues with the header content not displaying properly without word wrapping. Additionally, there seems to be a 1px gap above the sticky header when scrolling through the content.
Here is my code snippet:
div.list_wrapper {
height: 250px;
overflow: auto;
}
thead tr th {
position: sticky;
top: 0;
}<div class="list_wrapper col-md-12">
<div class="table_wrapper table-responsive">
<table class="">
<thead>
<tr>
<td colspan="3"></td>
<td>A text to be always displayed here</td>
</tr>
<tr>
<th>Date</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let list of OfficersList">
<td>{{ list.updated_at | date:'d-MM-yyyy' }}</td>
<td>{{ list.name }}</td>
<td>{{ list.status }}</td>
<tr>
</tbody>
</table>
</div>
</div>