me he encontrado con una gran paradoja.
Ya terminado mi proyecto, he querido mejorarlo corrigiendo algunos detalles como es (entre otros) mantener las celdas de encabezado fijas al momento de hacer scroll vertical en las tablas.
He recurrido al gran google en busca de una solución "sencilla", pues considero que el W3C desde sus comienzos ha creado las condiciones necesarias para que incluso los navegadores modernos manejen esto sin mayores traumas (sin embargo hasta la fecha todavía ninguno lo maneja).
En mis búsquedas en google encontré soluciones realmente impresionantes!! y sin mas comencé a adaptarlas, una y una mas, y otra; y al final ninguna me funciono... porque?. porque tenia yo que adaptar mi código a ellas.
Es por ello que recurro a Uds. para que me ayuden, quisiera una utilidad que me permita hacer lo planteado sin mayores cambios (o al menos los mínimos) mas allá del que significa agregar un <script src="..."></script>
a mi proyecto.
Es importante mencionar que mi proyecto usa CSS y muchas de las rutinas que existen para tal efecto se basan en CSS fuertemente y dañan (o colisionan) con lo que yo ya tengo hecho en mis paginas.
Un requisito indispensable a la solución es que se base exclusivamente en javascript (o jQuery) sin tocar el CSS de tal forma que no dañe lo que ya he creado.
De antemano muchas gracias por su ayuda.
Aquí les dejo un ejemplo de la tabla a la cual yo quisiera que se mantuviera el encabezado fijo:
.LN {
background-color:#3399ff;
color:#fff;
border-color: #C0C0C0;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width:1px;
}
<table id="TBLineDocument" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="LN"> </th>
<th class="LN">Producto</th>
<th class="LN">Descripción</th>
<th class="LN">Almacen</th>
<th class="LN">Unidad</th>
<th class="LN">Cantidad</th>
<th class="LN">Valor Bs.</th>
<th class="LN">Dscto</th>
<th class="LN">Total Neto</th>
<th class="LN">Iva</th>
<th class="LN">Comis</th>
<th class="LN">Referencia</th>
</tr>
</thead>
<tbody>
<tr>
<th class="LN"><a id="LN_Menu_1">1</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">2</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">3</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">4</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">5</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">6</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">7</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">8</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">9</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
<tr>
<th class="LN"><a id="LN_Menu_1">10</a></th>
<td><input name="LN_codigo_1" size="20" style="width:93px;"></td>
<td><input name="LN_descripcion_1" size="40" style="width:310px; display:inline;" disabled></td>
<td><select name="LN_Almacen_1" size="1" style="width:70px;" disabled><option></option><option value="3939">FUERA DE INVENTARIO</option></select></td>
<td><select name="LN_Unidad_1" size="1" style="width:70px;" disabled><option></option><option value="5452">TRAMO</option></select></td>
<td><input name="LN_Cantidad_1" size="10" style="text-align: right;"></td>
<td><input name="LN_valorBs_1" size="12" style="text-align: right;"></td>
<td><input name="LN_Dscto_1" size="05" style="text-align: right;" disabled></td>
<td><input name="LN_TotalNeto_1" size="14" style="text-align: right;" disabled></td>
<td><input name="LN_CodIVA_1" size="02" style="text-align: center;" disabled></td>
<td><input name="LN_Comision_1" size="05" style="text-align: right;" maxlength="05" ></td>
<td><input name="LN_Referencia_1" size="13" style="text-align: left; " maxlength="12" disabled></td>
</tr>
</tbody>
</table>