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.

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.

The code snippet is as follows:

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);

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

http://jsfiddle.net/urvfE/

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.

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?

回答1:

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();

Is now:

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

Then I changed the statement to call the function:

$(window).scroll(moveScroll);

Is now:

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

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

Here's a fiddle: 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!

EDIT: 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;
}

One last fiddle! http://jsfiddle.net/KfxQg/

回答2:

You can use jQuery TH Float Plugin. If you want to make table th to be fixed you can use it like this

$("#maintable").thfloat({
  attachment : "#maintable",
  noprint : false
});

FIDDLE

来源：https://stackoverflow.com/questions/17746147/fixed-table-headers-with-a-fixed-banner-div