Большая HTML-таблица с фиксированным заголовком внутри прокручиваемого блока 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 из этих таблиц на одной странице... и заголовки останутся в этих блоках... при прокрутке вправо влево вверху или внизу).

Или это

Сайт 3

http://www.tablefixedheader.com/dmonstration/

--

Хорошо ... как я могу добиться того же эффекта с Сайтом 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... но использовал загрузку для стилей с этой сеткой... сломал страницу... и стили не были сопоставлены с загрузкой.


jquery css html-table fixed-header-tables
person ihightower    schedule 28.02.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Существует также решение на чистом CSS (с некоторыми плюсами и минусами), которое включает в себя обертку <th> содержимое в div установлено на position: absolute.

person Community    schedule 09.09.2014

arrow_upward
0
arrow_downward

Вы можете использовать простой и очевидный способ поместить заголовки в один DIV, а затем строки в другой div. Блок div, содержащий строки, будет иметь фиксированную высоту и переполнение, настроенное на прокрутку/авто

Вы также можете написать быструю функцию, которая сделает это за вас с помощью jQuery.

function fixedHeader(table)
{
    var header = table.find("thead").html();
    var body = table.find("body").html();
    // add <table> tags to both header and body or the containers
    $("#yourHeaderContainer").html(header);
    $("#yourContentContainer").html(body);
    table.hide();
}

это, конечно, не полное решение, а всего лишь один из многих способов, но я думаю, что это даст вам пищу для размышлений

person Grishka    schedule 28.02.2014
comment
Я действительно не знаю, как реализовать вышеизложенное ... но в любом случае я попытаюсь, и в случае успеха я снова обновлю здесь. Я на самом деле надеюсь на стандартную технику, использующую плагины напрямую, вместо того, чтобы готовить их самостоятельно. спасибо в любом случае. - person ihightower; 28.02.2014
comment
tablescroll даже наименее полезен... нет хорошей документации. scrollwidth нигде не найти. высота прокрутки пока работает на базовом уровне. В общем, не на что посмотреть. В настоящее время я борюсь с подходом datatables.net.. он работает лучше.. не на 100%.. я не знаю, связано ли это с ошибками, или функция неполная.. или я делаю это неправильно.. я скоро поделится подробностями здесь. - person ihightower; 03.03.2014