Большая HTML-таблица с фиксированным заголовком внутри прокручиваемого раздела. Как? ⇐ CSS

[Anonymous]

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

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

Сайт 1

https://datatables.net/release-datatabl ... ables.html

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

Что Я имею в виду, это... это не что-то вроде этого:

Зона 2

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

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

ИЛИ, это

Сайт 3

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

--

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

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

Пример:
html-страница начинается...

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

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

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

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

--

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

Подробнее здесь: https://stackoverflow.com/questions/220 ... le-div-how