Question

情况：包含多行表的页面。当滚动时，使用jquery或任何给定的脚本，当我们到达页面顶部时，我想修复thead。我不想让桌子溢出来。

Answer 1

您可以稍加修改使用Lobstrosity的代码：position: fixed而不是absolute。

position: fixed现在已被所有浏览器广泛采用，包括IE8及其后续版本。移动/平板电脑设备上的BTW固定效果比position: absolute好得多。

我发现在每个列的动态宽度的桌子上，绝对定位的＆lt; thead＆gt;会丢失其余列的宽度，所以为了解决这个问题，我提出了以下代码：

此代码的作用如下：

通过查找第一个＆lt; tbody＆gt;的CSS宽度来确定表格中每列的宽度。＆LT; TR＆GT; ＆LT; TD＆GT;将这些行存储并存储在数组中以供日后使用。当用户滚动类时，'fixed'被添加到＆lt; thead＆gt; （默认浏览器行为将改变＆lt; th＆gt;的宽度，并且它们与＆lt; tbody＆gt;不匹配。因此，为了解决这个问题，我们追溯性地将＆lt; th＆gt;的宽度设置为我们的值'我早些时候读过。

无论如何这里是代码：

<强> 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 &lt;tbody> and get the widths of individual &lt;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 &lt;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的宽度相应地进行调整。因此，如果您没有指定列宽或者任何列的标题比该列中的任何其他单元格宽，那么您会遇到丑陋的行为。

<强> 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：

<!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风格适应你的风格）。这里的工作示例：http://jsfiddle.net/lukasi/7K52p/1/

Answer 4

2020年更简单的解决方案：

CSS position: sticky现在具有相当好的浏览器支持。

请参阅：https://caniuse.com/#feat=css-sticky

您不能将position: sticky应用于<thead>或<tr>。

但是您可以通过将以下CSS应用于<thead>来使<th>成为粘性：

th {
  position: sticky;
  top: 0;
}

工作示例：

.tableContainer {
  width: 360px;
  border: 1px solid rgb(127, 127, 127);
  max-height: 180px;
  overflow: auto;
}

table {
  width: 100%;
}

th {
  position: sticky;
  top: 0;
  background-color: rgb(255, 255, 0);
}

td {
  width: 60px;
  height: 60px;
}

tr,
td {
  border: 1px solid rgb(191, 191, 191);
  border-collapse: collapse;
}

tr:nth-of-type(odd) td:nth-of-type(odd),
tr:nth-of-type(even) td:nth-of-type(even) {
  background-color: rgb(0, 0, 0);
}

<div class="tableContainer">

<table>
<thead>
<tr>
<th>This</th>
<th>thead</th>
<th>is</th>
<th>now</th>
<th>sticky</th>
</tr>
</thead>

<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>


<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>


<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>


<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

</div>

在页面滚动上修复thead

4 个答案: