Большая HTML-таблица с фиксированным заголовком внутри Scrollable Div. Как?

Эта проблема беспокоит меня некоторое время.

Вот две таблицы html с фиксированным заголовком на одной странице:

Сайт 1

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

Но эти 2 таблицы находятся на самой странице ... но не отдельно в прокручиваемом элементе div.

Я имею в виду, что это не так:

Сайт 2

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

(на самом деле я могу иметь 2 из этих таблиц на той же странице ... и заголовки будут оставаться в тех же divs ... при прокрутке вправо влево вверх или вниз).

Или это

Сайт 3

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

-

Хорошо ... как я могу достичь того же эффекта с сайтом 1 (с использованием данных), что я могу увидеть на сайте 2 (Grid Demo).

Я хочу использовать стандартные простые библиотеки, такие как ... jquery, jqueryui, jquery mobile, bootstrap, datatable, чтобы удовлетворить мои потребности ... иметь несколько таблиц на одной странице ... каждая из них может прокручивать свою собственную ... ширину и высоту ... с на странице. Я не хочу использовать библиотеки с какой-то случайной страницы в сети ... которая может не иметь никакой поддержки в будущем.

Пример:

HTML страница начинается ...

Таблица 1 ... скажем, 50 столбцов .. и 500 строк .. (отображается с прокруткой div размером 400px x 300px с фиксированными заголовками)

и прямо под таблицей выше после нескольких строк ... это ...

Таблица 2 ... скажем, 30 столбцов .. и 400 строк .. (отображается с прокруткой div размером 400px x 300px с фиксированными заголовками)

конец html страницы

-

Я попробовал сайт 2 ... но с помощью начальной загрузки для стилей с этой сеткой ... сломал страницу ... и стили не были сопоставлены с начальной загрузкой.