Esse problema está me incomodando há um tempo.

Aqui estão duas tabelas html de cabeçalho fixo na mesma página:

Site 1

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

Porém, essas 2 tabelas estão na própria página ... mas não separadamente em uma div rolável.

O que quero dizer é .. não é algo como isto:

Site 2

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

(na verdade, eu posso ter duas dessas tabelas na mesma página. e os cabeçalhos permanecerão bem nessas divs. quando rolar para a direita, em cima ou em baixo).

Ou isto

Site 3

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

-

Ok .. como posso obter o mesmo efeito no Site 1 (usando a tabela de dados) do que posso ver no Site 2 (Grid Demo).

Eu quero usar bibliotecas fáceis padrão como .. jquery, jqueryui, jquery mobile, bootstrap, dados para atender minha necessidade .. de ter várias tabelas na mesma página ... cada uma delas pode rolar por conta própria .. largura e altura ... com na página. Eu não desejo usar bibliotecas de alguma página aleatória na rede ... que talvez não tenha suporte no futuro.

Exemplo:

a página html inicia ...

Tabela 1 ... digamos 50 colunas .. e 500 linhas .. (exibidas com div rolável de 400px x 300px com cabeçalhos fixos)

e logo abaixo da tabela após algumas linhas ... é ...

Tabela 2 ... digamos 30 colunas .. e 400 linhas .. (exibidas com div rolável de 400px x 300px com cabeçalhos fixos)

página html final

-

Eu tentei o Site 2 .. mas usando o bootstrap para estilos com essa grade .. quebrei a página .. e os estilos não correspondiam ao bootstrap.