Замороженный заголовок таблицы в отделении с возможностью прокрутки

Необходимо было бы поместить заголовок вне отделения с возможностью прокрутки. Все в отделении прокрутит.

Править

Относительно ширины, если Вы идете для отдельного заголовка, я вижу несколько решений:

• Принятие этого является динамическим контентом, генерируйте "зафиксированные" ширины на основе длины строки. Очевидно, укажите с точки зрения ЭМСА и оставьте некоторое поле для ошибки.
• Используйте JavaScript.
• Используйте столбцы фиксированной ширины.

Я на самом деле не попробовал первое, и это могло бы сверхусложнять вещи немного. Это - что-то, чтобы попробовать, если Вы отчаянно нуждаетесь в эффекте все же.

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

Необходимо поместить таблицу с заголовками о таблице данных. Можно поддержать ширину столбца с таблицей-layout:fixed. JavaScript может использоваться для соответствия ширине столбцов.

Можно попробовать плагин jQuery Глупый Фиксированный Заголовок. Техника является в основном тем же: клонируйте заголовок и поместите его сверх слоя таблицы.

То, что Вы на самом деле хотите сделать, делает <tbody> из таблицы данных, с возможностью прокрутки, таким образом, <thead> и <tfoot> останется естественно зафиксированным.

Пока это тривиально для FF и др.:

tbody
{
    height: 100px; /* or whatever */
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

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

Вот хорошее решение (главным образом CSS), который использует столбцы фиксированной ширины: http://www.imaputz.com/cssStuff/bulletVersion.html

И вот немного кода jQuery для фиксации ширин ячеек, когда содержание ячейки берет больше ширины, чем фиксированная ширина:

<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
  type="text/javascript"></script>
<script>
$(function() {
  $('div.tableContainer').each(function() { // for each table
    var div = $(this);
    var widths = [];
    var changed = false;
    $('table>*>tr', div).each(function(tr_i) {
      $(this).children().each(function(i) {
        var w = $(this).width();
        if (w > widths[i]) {
            widths[i] = w;
            changed = true;
        }
      });
    }).each(function(tr_i) {
      if (changed)
      $(this).children().each(function(i) {
        var width = widths[i];
        // add some width for scrollbar
        if (tr_i == 0 && changed && i == widths.length-1) width += 16;
        // insert a div to ensure width
        $(this).append('<div style="width:'+width+'px; height:0px">&nbsp;</div>');
      });
    });
    div.width(div.children('table').width()).css('overflow-x', 'hidden');
  });
});
</script>

Вывод немного выключен в IE при использовании нестрогого DTD. Настройте ширины в CSS, если Вы не можете использовать режим стандартов.

Обратите внимание, что код jQuery увеличивает таблицу width в конце и отключает горизонтальную полосу прокрутки. Вы можете или не можете хотеть это.

Я не протестировал это, но возможно Вы могли генерировать таблицу дважды, однажды в заголовке и однажды в отделении прокрутки. Затем в заголовке, сделайте все строки кроме направляющейся строки невидимыми. Возможно, с 'дисплеем: ни один' или обнуленный их высота.

Это решение работы с помощью CSS в Firefox и других браузерах Геккона и выражениях CSS в IE.

http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

Заголовок и нижний колонтитул не остаются фиксированными в Opera или Safari/Chrome, но целая таблица с возможностью прокрутки, таким образом, это применимо. Обратите внимание, что столбцам дают ширины процента в примере автора, но они могут быть удалены.

Если Вы хотите экспериментировать с поддержкой Opera/Safari/Chrome, взгляд на предоставление tbody display:block и пойти оттуда.

Смотрите на Таблицу данных YUI при поиске всесторонней реализации перекрестного браузера. Я полагаю, что это сделано путем составления другой таблицы с соответствием ширине столбцов.

Кажется, существуют приемы, требуемые зафиксировать ширину столбцов. Если я вспоминаю правильно, Firefox требует <чтобы седло/> теги присутствовало.

В любом случае было много приемов, используемых в YUI DataTable (50k строки). Вам было бы целесообразно посмотреть на него и решить, как далеко требуется пойти собственное с этим.

Я только что собрал плагин jQuery, который делает именно то, что вы хотите. Он очень мал по размеру и очень прост в реализации.

Все, что требуется, это таблица с тегами thead и tbody.

Вы можете заключить эту таблицу в DIV с именем класса, и таблица всегда будет изменять размер, чтобы соответствовать в этом div. так, например, если ваш div масштабируется вместе с окном браузера, таблица тоже. Заголовок будет фиксироваться при прокрутке. Нижний колонтитул будет исправлен (если вы включите нижний колонтитул). У вас также есть возможность клонировать верхний колонтитул в нижний колонтитул и исправить его. Также, если вы сделаете окно браузера слишком маленьким и все столбцы не поместятся ... оно также будет прокручиваться по горизонтали (также заголовок).

вы просто передаете имя класса DIV плагину следующим образом: $ ('. MyDiv' ) .fixedHeaderTable ({нижний колонтитул: истина, нижний колонтитул: 'myFooterId'}); а плагин сделает все остальное. FooterID - это элемент на странице, который содержит разметку для вашего нижнего колонтитула. это используется, если вы хотите использовать разбиение на страницы в качестве нижнего колонтитула.

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

проверьте это здесь: http://fixedheadertable.mmalek.com/

Помните, что это все еще «бета», поэтому я ежедневно добавляю новые функции и исправления ошибок.

Поддерживаемые браузеры: IE6, IE7, IE8, FireFox, Safari и Chrome