Исправить thead на странице прокрутки

Question

Положение: Страница с таблицей из нескольких строк. Я хочу исправить thead, когда thead достигает верхней части страницы при прокрутке, используя jquery или любой данный сценарий. Я не хочу переполнять саму таблицу.

Answer 1

Вы можете использовать код Lobstrosity с небольшим изменением: position: fixed вместо absolute.

position: fixed теперь широко используется всеми браузерами, включая IE8 и более поздние. Кстати, на мобильных и планшетных устройствах фиксированный рендеринг гораздо лучше, чем position: absolute.

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

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

Этот код выполняет следующие действия:

Определяет ширину каждого столбца в вашей таблице, ища ширину CSS первой строки

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

В любом случае вот код:

CSS

table.entries {width: 100%;border-spacing: 0px;margin:0;}
table.entries thead.fixed {position:fixed;top:0;}

HTML

<table class="entries" id="entriestable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Location</th>
            <th>DOB</th>
            <th>Opt&nbsp;in</th>
            <th>Added</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="name">Ricky Bobby</td>
            <td>ricky.bobby@email.com</td>
            <td class="addy"><i>Kent, GB</i></td>
            <td class="dob">20/08/1984</td>
            <td>Yes</td>
            <td class="date">4 hours ago</td>
        </tr>
    </tbody>
</table>

JavaScript

TableThing = function(params) {
    settings = {
        table: $('#entriestable'),
        thead: []
    };

    this.fixThead = function() {
        // empty our array to begin with
        settings.thead = [];
        // loop over the first row of td's in <tbody> and get the widths of individual <td>'s
        $('tbody tr:eq(1) td', settings.table).each( function(i,v){
            settings.thead.push($(v).width());
        });

        // now loop over our array setting the widths we've got to the <th>'s
        for(i=0;i<settings.thead.length;i++) {
            $('thead th:eq('+i+')', settings.table).width(settings.thead[i]);
        }

        // here we attach to the scroll, adding the class 'fixed' to the &lt;thead> 
        $(window).scroll(function() {
            var windowTop = $(window).scrollTop();

            if (windowTop > settings.table.offset().top) {
                $("thead", settings.table).addClass("fixed");
            }
            else {
                $("thead", settings.table).removeClass("fixed");
            }
        });
    }
}
$(function(){
    var table = new TableThing();
    table.fixThead();
    $(window).resize(function(){
        table.fixThead();
    });
});

Answer 2

Вот то, что работает (быстро протестировано в FF 3.5, Chrome 3 и IE 8), которое вы можете адаптировать к вашим потребностям.

В нем используется абсолютное позиционированиеиз thead.Когда thead становится абсолютно позиционированным, это в основном удаляет его из исходного потока table, и ширина всех tbody td s корректируется соответствующим образом.Таким образом, вы получаете уродливое поведение, если не указали ширину столбца или если заголовок какого-либо столбца шире, чем любая другая ячейка в этом столбце.

CSS

#Grid thead.Fixed
{
    position: absolute;
}

HTML

<table id="Grid">
    <thead>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <!-- etc. -->
    </tbody>
</table>

jQuery

$(function() {
    var table = $("#Grid");

    $(window).scroll(function() {
        var windowTop = $(window).scrollTop();

        if (windowTop > table.offset().top) {
            $("thead", table).addClass("Fixed").css("top", windowTop);
        }
        else {
            $("thead", table).removeClass("Fixed");
        }
    });
});

Я заметил, что он не работает в IE, если вы не указали строгий XHTML-тип документа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <!-- etc. -->

Answer 3

(function ($) {
    $.fn.fixedHeader = function () {
        return this.filter('table').each(function () {
            var that = this;
            var $head = $('<div></div>').addClass('head');
            $(this).before($head);
            $('th', this).each(function () {
                var $el = $(this);
                var $div = $('<div></div>').width($el.outerWidth()).text(
                $el.text());
                $head.append($div);
            });
            $(window).on('scroll', function () {
                var $that = $(that);
                var w = $(window).scrollTop();
                var o = $('th', that).first().offset().top;
                var tableO = $that.offset().top + $that.height();
                if (o < w && tableO > w) {
                    $head.show();
                } else {
                    $head.hide();
                }
            });
        });
    };
})(jQuery);

Вы можете использовать этот плагин jquery (вам нужно адаптировать стиль .head к вашему стилю thead). Рабочий пример здесь: http://jsfiddle.net/lukasi/7K52p/1/