带有固定横幅div的固定表头 [英] Fixed table headers with a fixed banner div

问题描述

我使用了

I have used code from this SO question to successfully create fixed table headers, however I'm having a few issues adapting it to my page that I can't figure out. I'm a little new to Javascript/jQuery so please bear with me a little.

该代码依赖于浏览器中的滚动事件来检测何时 THEAD 不可见，因此它知道何时克隆表并将克隆的标题放置在页面顶部.
但是，我的页面在页面顶部有一个固定的 DIV ，其中包含一个搜索栏，等等.当出现此提示时，固定的标题不起作用.我正在努力寻找解决方法，因为我需要固定区域.这可能真的很简单，但我没看到.

The code relies on the scroll event in the browser to detect when the THEAD is out of view so that it knows when to clone the table and position the cloned header at the top of the page.
However my page has a DIV fixed at the top of the page that contains a search bar etc and when this is present the fixed header does not work. I'm struggling to find a way around this as I need the fixed area. It's probably really simple but I'm not seeing it.

代码段如下:

function moveScroll() {
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;

    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");

        if (clone_table.length === 0) {
            clone_table = $("#maintable").clone();
            clone_table.attr({
                id: "clone"
            }).css({
                position: "fixed",
                "pointer-events": "none",
                top: 0
            }).width($("#maintable").width());

            $("#table-container").append(clone_table);

            $("#clone").width($("#maintable").width());

            $("#clone").css({
                border: "none"
            });

            $("#clone thead").css({
                visibility: "true"
            });

            $("#clone tbody").css({
                visibility: "hidden"
            });

            var footEl = $("#clone tfoot");
            if (footEl.length) {
                footEl.css({
                visibility: "hidden"
            });
        }
    }
    } else {
        $("#clone").remove();
    }
}

$(window).scroll(moveScroll);

这是一个JSFiddle，其中包含页面的精简版本.

Here's a JSFiddle with a stripped down version of the page.

> http ://jsfiddle.net/urvfE/

如果删除#topsection和#table-container的CSS部分，则会看到固定的标头起作用.当这些部分出现时，没有任何作用.

If you remove the CSS sections for #topsection and #table-container you'll see the fixed headers in action. When these sections are present nothing works.

顺便说一句，我还有另一个问题.如果我在桌子上使用border-collapse:collapse来获得漂亮的边框，则Firefox无法正确呈现固定的标头.而是在顶部显示一个完整的空表.有什么想法可以避免这种情况吗?

As an aside, I also have one other issue. If I use border-collapse:collapse on the table to get nice borders Firefox doesn't render the fixed header properly. It renders a full empty table over the top instead. Any ideas how to circumvent this?

推荐答案

我在周末之后回到了这个问题，并解决了这个问题.我不敢相信上周看不到这个！这证明了一双新鲜的眼睛能做什么.
我以为我会在这里回答，以防其他任何人想要这段代码.

I came back to this problem after the weekend and solved it. I can't believe I couldn't see this last week! It proves what a fresh pair of eyes can do.
I thought I'd answer it here in case anyone else would like this code.

我更改了其中一个变量以侦听主体部分的顶部，而不是整个窗口:

I changed one of the variables to listen to the top of the main section instead of the whole window:

var scroll = $(window).scrollTop();

现在是:

var scroll = $('#table-container').offset().top;

然后我将语句更改为调用该函数:

Then I changed the statement to call the function:

$(window).scroll(moveScroll);

现在是:

$('#table-container').scroll(moveScroll);

最后，我手动将固定标头的顶部设置为130px以匹配顶部的底部.

Lastly I manually set the top of the fixed header to 130px to match the bottom of the topsection.

这是一个小提琴: http://jsfiddle.net/hvRZy/

我仍然无法解决边界崩溃问题，因此，如果有人在这方面有任何想法，那就太好了.谢谢！

I still can't solve the border-collapse issue though so if anyone has any ideas on that front that'd be amazing. Thanks!

编辑:我已经设法通过以下CSS(还添加了圆角)解决了边框问题:

I've managed to solve the border issue with the following CSS (also added rounded corners):

table {
    border-collapse: separate;
    border-spacing: 0px;
}
table tr th, table tr td {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
}
table tr th:first-child, table tr td:first-child {
    border-left: 1px solid #000;
}
table tr th {
    background: #c0c0c0;
    border-top: 1px solid #000;
    text-align: center;
}
table tr:first-child th:first-child {
    border-top-left-radius: 6px;
}
table tr:first-child th:last-child {
    border-top-right-radius: 6px;
}
table tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
table tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

最后一个小提琴！ http://jsfiddle.net/KfxQg/

这篇关于带有固定横幅div的固定表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！