Заморозить заголовок TH и прокрутить данные

Question

У меня есть HTML-таблица, и я хочу заморозить тег заголовка строки th для прокрутки данных. Как я могу это сделать? Нужно ли использовать Дом? Спасибо !!

Answer 1

С FireFox вы можете поместить style = "height: 200px; overflow-y: auto". Но чтобы иметь чистую версию CSS, совместимую со всеми основными браузерами, я использую этот пример , поскольку IE не не поддерживает syles в теле или thead.

Answer 2

Если вы серьезно относитесь к Accessibility, две таблицы - это не тот путь, который нарушает правила.

Существуют способы сделать это на чистом CSS, но заставить его работать во всех браузерах - головная боль. В сети есть несколько примеров, но они не все работают на 100% с IE без настроек.

В настоящее время я работаю над CSS-версией, это уже довольно близко: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825

Пока не работает в IE8rc1, IE6 / 7 имеет проблему с границей, и вам приходится жить с полосой прокрутки, которая выглядит по-другому в FF против IE.

Answer 3

Мое решение - использовать две таблицы и зафиксировать ширину столбцов. Нижняя таблица находится в прокручиваемом элементе div и не имеет заголовка.

Answer 4

Я придумала решение, которое объединяет два ранее упомянутых. Он использует jQuery и две таблицы, одну для заголовка и одну для содержимого. Таблица заголовков имеет ширину 100% без ширины столбца. В нижней части таблицы содержимого есть строка, определенная для сопоставления таблицы заголовков с установленной шириной столбца. Эта строка скрыта, поэтому она не отображается, но сохраняет ширину столбца.

Для этого примера я дал своей строке заголовка идентификатор «Header1», а нижнюю строку и идентификатор «Header2». Также я обернул таблицу содержимого внутри div с идентификатором scrollTable.

Я установил стили в своем CSS-файле для идентификатора scrollTable, см. Ниже:

    #scrollTable {
 height:250px;
 overflow-x:hidden;
 overflow-y:scroll;
    }

Теперь для части jQuery. В основном то, что я здесь делаю, - это брать ширину нижних столбцов строки и настраивать соответствующие столбцы заголовков. Я растягиваю ширину последнего столбца заголовка, чтобы он помещался поверх полосы прокрутки. Смотрите код ниже:

   $(document).ready(function(){
 var maxWidth = $('#Header1').width();    // Get max row Width
 $('#Header2 th').each(function(i) {     // Set col headers widths to to match col widths 
      var width = $(this).width();
      $('#Header1 th').eq(i).width(width);
 });

 var blankSpace = maxWidth - $('#Header1').width();               // Calculate extra space
 $('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace );  // Stretch last header column to fill remaining space

});

Я успешно проверил это в IE 6, 7 и 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10 и Safari 3.2.2 в Windows XP.

Answer 5

Вы пробовали этот плагин от JQuery? http://plugins.jquery.com/project/floatobject Я верю, что это делает то, что вы хотите. Проверьте демо @ http://amirharel.com/labs/fo/float_demo.html Ура! * * 1005

Answer 6

Создайте одну таблицу, как обычно, для удовлетворения требований доступности. Динамически создайте новую таблицу на основе thead, используя jQuery (скопируйте thead), вставьте ее на страницу над первой таблицей и установите для нее фиксированное положение. Он должен оставаться на месте, пока прокручивается остальная часть таблицы, но он по-прежнему будет доступен и работать с отключенным JavaScript.

Answer 7

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

Это заголовки в нижней части заставляют нижнюю таблицу иметь такую ​​же ширину столбцов, что и верхняя таблица, что выстраивает вещи в линию. убедитесь, что стиль заголовка и нижнего колонтитула одинаков.

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

это довольно легко, на самом деле =)

Answer 8

Я делал это в прошлом, используя CSS, определив height для тега <TBODY> на моей таблице и используя overflow:auto. Это было некоторое время назад, и я думаю, что были некоторые проблемы с совместимостью. Я точно не помню, кем они были, но это решение может помочь вашей проблеме.