css - 任何人都有位置为 :sticky not working on FF & IE? 的 table>th 的解决方案

Question

我有一个制作表格的粘性标题的想法，我已经尝试过使用 position:sticky。它是 在 Chrome 上运行良好，但在 Firefox 和 IE 上运行不正常。下面是我的 CSS

.myTable--mof thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index:100;
}

Answer 1

position:sticky 在某些浏览器中不支持子表元素。 “为什么”我不知道.. 将来会得到支持吗？我当然希望如此!

我最近写了这个 jQuery 解决方案。它适用于具有简单标题的简单表格。 不在 thead 中查找 colspans 或多行!

我之前尝试过一些插件，但它们都监听了在某些浏览器中抛出警报的滚动事件。它们在某些情况下会导致闪烁/跳跃，并且在击中要停留的位置时会出现明显的延迟。

对其他元素使用 position:sticky 并且更喜欢这些过渡，我想出了以下代码。

jQuery.fn.stickTableHeaders = function() {
    return this.each(function()
    {
        var table = $(this),
        header = table.find('thead'),
        sticked = $('<table></table>').addClass('table').append(header.clone()); // Needs to be wrapped in new table since table child elements can't be sticky? (FF)

        sticked.find('th').css({ // You'll have to copy the original thead (th's) CSS manualy
            'backgroundColor': '#DEE5EA',
            'color': '#606060',
            'padding':'8px',
            'color':'#606060'
        }).removeAttr('width'); // And remove the width attr from the clone th's since we'll be setting them again later

        sticked.find('th:not(:last-child)').css({ // More CSS
            'borderRight': '1px solid #ddd'
        });

        sticked.find('a').css({ // More CSS
            'color':'#606060'
        });

        // I tried different things, most of the original th's should have a width attribute set (not in CSS and avoid percent) for best results
        $(window).resize(function() {
            sticked.width(table.width());
            sticked.find('th').each(function() {
                var headerTH = header.find('th').eq($(this).index());
                if(headerTH.is('[width]') || headerTH.is(':first-child') || headerTH.is(':last-child')) { // First and last th are allready calculated by another function in my app. See what suits for you here...
                    $(this).width(header.find('th').eq($(this).index()).width());
                }
                else {
                    var cellWidth = header.find('th').eq($(this).index()).width(true),
                    tableWidth = table.width(true),
                    percent = 100*(cellWidth/tableWidth);
                    $(this).css({'width':percent+'%'});
                }
            });

            // We keep the original thead to avoid table collapsing, we just slide the whole table up.
            table.css({
                'marginTop':-header.height()
            });
        }).trigger('resize');

        // Apply stickyness 
        sticked.css({
            'display':'table',
            'position':'sticky',
            'top':$('#header-menu').height(), // My sticky nav is my top position, adjust this to your needs
            'zIndex':'10'
        });

        // Insert clone before original table
        $(this).before(sticked);
    });
};

现在我只在每次加载页面时使用它:

$("table").stickTableHeaders();

您可能想从上述选择器中过滤掉嵌套表格...

希望这对某人有帮助。