将Thead固定在页面滚动上 [英] Fix thead on page scroll

问题描述

情况: 带有几行表格的页面. 我想在滚动使用jquery或任何给定脚本滚动至页面顶部时修复thead. 我不想让表本身溢出.

Situation: A page with a table with several rows. I want to fix thead when thead reach the top of the page when scrolling, using jquery or any given scripting. I don't want to overflow the table itself.

推荐答案

您可以使用Lobstrosity的代码进行一些修改:position: fixed而不是absolute.

You can use Lobstrosity's code with a slight modification: position: fixed instead of absolute.

position: fixed现在已被包括IE8及更高版本在内的所有浏览器广泛采用.固定的BTW在移动/平板电脑设备上的呈现比position: absolute好得多.

position: fixed is now widely adopted by all browsers including IE8 and onwards. BTW fixed renders much nicer on mobile/tablet devices than position: absolute.

我发现在每列具有动态宽度的表上，绝对定位的< thead>会丢失其余列的宽度，因此要解决此问题，我想出了以下代码:

I found that on a table with dynamic widths for each column, the absolutely positioned <thead> would lose the widths of the rest of the columns, so to fix this I came up with the following code:

此代码的作用如下:

通过查找第一行< tbody>< tr>< td>的CSS宽度并将其存储在数组中以备后用，确定表中各列的宽度.当用户滚动时，将'fixed'类添加到< thead>中(默认的浏览器行为会更改< th>的宽度，并且不会与< tbody>匹配.因此，请进行修复为此，我们将< th>的宽度设置为我们先前阅读的值.

Determines the widths of each column in your table by looking up the CSS widths of the first <tbody> <tr> <td> row and storing these in an array for later. When the user scrolls the class 'fixed' is added to the <thead> (Default browser behaviour will alter the widths of the <th>'s and they won't match up with the <tbody>. So to fix this we retroactively set the widths of the <th> to the values we've read earlier.

反正这是代码:

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>[e-mail]</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();
    });
});

这篇关于将Thead固定在页面滚动上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！