Tengo una tabla en la cual necesito poner un encabezado fijo cuando se mueve hacia abajo, debido a que hay muchos datos a mostrar. El problema está en que tengo muchas columnas que mostrar, y estas columnas abarcan más del ancho de la pantalla.
Ya busqué bastantes maneras de realizar lo que busco, lo intento realizar con Jquery
, pero si se baja poco el encabezado se vuelve loco, y cuando se baja más se mantiene el encabezado, pero las columnas del encabezado ya no concuerdan con las columnas del contenido, y no logré hacer que el encabezado se mueva conforme al scroll horizontal.
En este enlace tengo un ejemplo de lo que "logré" hacer por ahora:
var stickyOffset = $('.sticky').offset().top;
$(window).scroll(function() {
var sticky = $('.sticky'),
scroll = $(window).scrollTop();
if (scroll >= stickyOffset) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
.fixed {
position: fixed;
top: 0;
left: 40;
}
body {
padding: 0 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
table {
border-width: 1;
border-style: solid;
padding: 0;
margin: 0 0 200px 0;
border-collapse: collapse;
}
th {
padding: 5px;
/*NOTE: th padding must be set explicitly in order to support IE*/
text-align: right;
font-weight: bold;
line-height: 2em;
color: #FFF;
background-color: #b1b1b1;
}
tbody td {
padding: 10px;
line-height: 18px;
border-top: 1px solid #E0E0E0;
}
tbody tr:nth-child(2n) {
background-color: #F7F7F7;
}
tbody tr:hover {
background-color: #EEEEEE;
}
td {
text-align: right;
}
td:first-child,
th:first-child {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<p>Contenido</p>
<p>Contenido</p>
<p>Contenido</p>
<p>Contenido</p>
<p>Contenido</p>
<p>Contenido</p>
</body>
<table border="1">
<tr class="sticky">
<th>Id</th>
<th>Cliente</th>
<th>Descripcion</th>
<th>Notas</th>
<th>Fecha de llegada</th>
<th>Fecha ejecucion</th>
<th>Usuario</th>
<th>Informacion</th>
<th>Informacion</th>
<th>Informacion</th>
<th>Informacion</th>
<th>Informacion</th>
<th>Informacion</th>
<th>Informacion</th>
</tr>
<tr>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
</tr>
<tr>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
</tr>
<tr>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
</tr>
<tr>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
</tr>
<tr>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
</tr>
<tr>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
</tr>
<tr>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
<td>Datos</td>
</tr>
</table>
</html>