Fixing table header on webpage

Question

I would like to know how to fix a table header even if we scroll down on a website and out of the table view. I would like to use css style to do this. Thank you.

I would also like to know how to fix an element on a webpage so it always appears even when we scroll down. The image can be text. Use div and css

position: fixed, [more info here](http://www.w3schools.com/css/css_positioning.asp) — Pratik Galoria, Jun 30 '15 at 11:11
have you tried this for fixed table header ? https://www.datatables.net/examples/basic_init/scroll_xy.html — DesignSnippet.com, Jun 30 '15 at 11:22

score 1 · Answer 1 · answered Jun 30 '15 at 11:45

You would do something like this by tapping into the scroll event handler on window, and using another table with a fixed position to show the header at the top of the page.

Example:

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();
    
    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

body { height: 1000px; }
#header-fixed { 
    position: fixed; 
    top: 0px; display:none;
    background-color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-1">
    <thead>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<table id="header-fixed"></table>

looks great and is what I want but doesn't work when I put it with my code or when I try it by putting it in a new html file — , Jul 03 '15 at 07:23

score 0 · Accepted Answer · edited May 23 '17 at 10:28

Taken from an old post of mine, here's an example of both things that you want done together in one fiddle.

JSFiddle

JQuery:

function moveScroll() {

var scroll = $('#table-container').offset().top;
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",
    left: $("#maintable").offset().left + 'px',
    top: 130
}).width($("#maintable").width());

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

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

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

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

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

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

Fixing table header on webpage

2 Answers2