I'm struggling to make the header of my AngularJS webpage sticky using Bootstrap Styling. Despite trying multiple solutions, none seem to work correctly. Does anyone have a simple approach to fix this issue? Additionally, when I attempt to make the header sticky, the width changes and does not match the tbody.
I attempted to fix the thead using the solutions from w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header
I have not had success finding solutions using AngularJS directives.
Here is my code:
<table class="table table-responsives table-striped table-hover" ts-wrapper
ts-no-data-text="No se encontró nada con ese criterio de búsqueda">
<thead id="myHeader" class="sticky: sticky">
<tr>
<th>Semana</th>
<th>Fecha</th>
<th>Operador</th>
<th>Empresa</th>
<th>Unidad</th>
<th>Origen</th>
<th>Destino</th>
<th>Flete (MXN)</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in viajes" ts-repeat>
<td>{{p.data.semana}}</td>
<td>{{p.data.fecha | date:'yyyy-MM-dd'}}</td>
<td>{{p.data.operador.data.nombre}}</td>
<td>{{p.data.empresa}}</td>
<td> <strong>Tipo de Unidad:</strong> {{p.data.unidad.data.tipo}} <br>
<strong>Tracto:</strong> {{p.data.unidad.data.tracto.placas}} |
{{p.data.unidad.data.tracto.modelo}} |
{{p.data.unidad.data.tracto.marca}} <br>
<strong>Caja:</strong> {{p.data.unidad.data.caja.placas}} |
{{p.data.unidad.data.caja.modelo}} |
{{p.data.unidad.data.caja.marca}}</td>
<td>{{p.data.origen}}</td>
<td>{{p.data.destino}}</td>
<td>$ {{p.data.flete|number}}</td>
<td>
<button class="btn btn-circle btn-assertive" ng-click="editarViaje(p)">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</button>
<!-- <button class="btn btn-circle btn-danger" ng-click="eliminarUsuario(p)">
<i class="fa fa-times" aria-hidden="true"></i>
</button> -->
</td>
</tr>
</tbody>
</table>
CSS:
/* Module Table */
.sticky {
position: fixed;
top: 0;
}
I'm hoping to maintain the width of my table header after making it sticky.
Thank you in advance.