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

Ответ 1

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

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

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

Что делает этот код:

Определяет ширину каждого столбца в таблице, просматривая ширину CSS первой строки <tbody> <tr> <td> и сохраняя их в массиве для последующего использования. Когда пользователь прокручивает класс "fixed", добавляется в <thead> (поведение браузера по умолчанию изменяет ширину & ​​lt; th > , и они не будут совпадать с <tbody> . Поэтому, чтобы исправить это, мы ретроактивно устанавливают ширину & ​​lt; th > на значения, которые мы читали ранее.

В любом случае здесь код:

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>[email protected]</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 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();
    });
});

Ответ 2

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

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

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. -->

Ответ 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/