I am currently working with Bootstrap V4 alpha 6 and Angular 5 to develop a table that includes a fixed header while scrolling. Unfortunately, I have been facing challenges in getting this functionality to work effectively.
Note: The navbar is set to fixed-top
Here are the approaches I have experimented with:
1) Applying the fixed-top class to the thead element.
2)
thead {
position: sticky;
top: 0;
}
3)
thead {
display:block;
}
4) A range of CSS modifications have been attempted, but none proved successful due to the responsive nature of the table, its scrollability, and multiple header rows.
Could someone pinpoint where the error lies?
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./assets/logo.png" width="200" height="40" class="d-inline-block align-top" alt="">
</a>
</nav>
<table class="table table-responsive w-100 d-block d-md-table table-bordered table-striped table-fixed">
<thead class="sticky-top">
<tr>
<th colspan="16" class="text-center">PROJECT 1</th>
</tr>
<tr>
<th rowspan="2">WON</th>
<th rowspan="2">LST #</th>
<th rowspan="2">FLR #</th>
<th colspan="3">GLS</th>
<th colspan="7">FRMS</th>
<th rowspan="2">Scheduled Date</th>
<th rowspan="2">Cmplt Date</th>
</tr>
<tr>
<th>G Reqd</th>
<th colspan="2">G Rcvd (%)</th>
<th>Frms Reqd</th>
<th colspan="2">Frms Ass (%)</th>
<th colspan="2">Frms Line (%)</th>
<th colspan="2">Frms Cmplt (%)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let project of projectData">
<td>{{project.ordernumber}}</td>
<td>{{project.ListNumber}}</td>
<td>{{project.floorID}}</td>
<td>{{project.glassRequired}}</td>
<td>{{project.glassReceived}}</td>
<td>{{project.glassReceivedPercent}}</td>
<td>{{project.framesRequired}}</td>
<td>{{project.framesAssembled}}</td>
<td>{{project.framesAssembledPercent}}%</td>
<td>{{project.framesGlazed}}</td>
<td>{{project.framesGlazedPercent}}%</td>
<td>{{project.framesShipped}}</td>
<td>{{project.framesShippedPercent}}%</td>
<td>{{project.deliverydate}}</td>
<td>Not Shipped Yet</td>
</tr>
</tbody>
</table>
A live demo can be viewed at this link.