Este problema me ha estado molestando por un tiempo.

Aquí hay dos tablas html de encabezado fijo en la misma página:

Sitio 1

https://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

Pero, estas 2 tablas están en la página en sí ... pero no por separado con un div desplazable.

Lo que quiero decir es ... no es algo como esto:

Sitio 2

http://www.matts411.com/static/demos/grid/index.html

(en realidad, puedo tener 2 de estas tablas en la misma página ... y los encabezados se mantendrán bien en esos divs ... cuando se desplace hacia la derecha, arriba, abajo o arriba).

O esto

Sitio 3

http://www.tablefixedheader.com/demonstration/

-

Ok .. ¿cómo puedo lograr el mismo efecto con el Sitio 1 (usando la tabla de datos) de lo que puedo ver en el Sitio 2 (Demo de cuadrícula).

Quiero usar bibliotecas sencillas estándar como ... jquery, jqueryui, jquery mobile, bootstrap, datatable para satisfacer mi necesidad ... de tener varias tablas en la misma página ... cada una de ellas puede desplazarse por sí misma ... ancho y alto ... con en la página. No deseo usar bibliotecas de alguna página aleatoria en la red ... que puede no tener ningún soporte en el futuro.

Ejemplo:

la página html comienza ...

Tabla 1 ... digamos 50 columnas ... y 500 filas ... (se muestra con div desplazable de 400 px x 300 px con encabezados fijos)

y justo debajo de la tabla después de algunas líneas ... es ...

Tabla 2 ... digamos 30 columnas ... y 400 filas ... (se muestra con div desplazable de 400 px x 300 px con encabezados fijos)

Fin de la página html

-

Intenté el sitio 2 ... pero usando bootstrap para estilos con esa cuadrícula ... rompí la página ... y los estilos no coincidían con bootstrap.