How to align column headers when they are stuck to the top of the page

Question

I'm trying to make a table with a header that is stuck to the top as you scroll down. I've been following this video: https://www.youtube.com/watch?v=SkVPkpSkorw . My table as the header misaligned. Any method is welcomed. I thought that duplicating the header row would keep its original width but it looks like the width just gets shorter for some reason

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <!-- This allows for the web page to fit any sized screen -->
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
    <table cellpadding="5" cellspacing="0" border="1">
        <thead>
            <tr style="background: aqua">
                <td>First</td>
                <td>Last</td>
                <td>Phone</td>
                <td>Email Address</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>

        </tbody>

    </table>
</div>
<script>
    // http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
    var Browser = {
        version: function() {
            var version = 999; // we assume a sane browser
            if (navigator.appVersion.indexOf("MSIE") != -1) {
                // bah, IE again, lets downgrade version number
                version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            }

            return version;
        }
    };

    var table = $('table'),
        thead = table.find('thead'),
        fixed_thead,

        the_window = $(window),

        tr_1, tr_2, did_scroll = false;

    thead.find('td').each(function() {
        $(this).css('width', $(this).width());
    });

    fixed_thead = thead.clone();

    thead.after(fixed_thead);

    if( Browser.version() < 8 ) {
        fixed_thead.find('tr').css({
            'position': 'absolute',
            'top': 0
        });

        tr_1 = fixed_thead.find('tr:first');
        tr_2 = fixed_thead.find('tr:last').css('margin-top', tr_1.height());
    }else {
        fixed_thead.css({
            'position': 'fixed',
            'top': 0,
            'width': table.width()
        });
    }

    fixed_thead.hide();

    the_window.scroll(function() {
        if( the_window.scrollTop() >= table.offset().top ) {
            fixed_thead.show();

            if( Browser.version() < 8 ) {
                did_scroll = true;
            }
        }else {
            fixed_thead.hide();
        }

        if( the_window.scrollTop() > (table.offset().top + table.height()) - fixed_thead.height() ) {
            fixed_thead.hide();
        }
    });

    setInterval(function() {
        if( did_scroll ) {
            did_scroll = false;
            tr_1.css('top', the_window.scrollTop());
            tr_2.css('top', the_window.scrollTop());
        }
    }, 250);

</script>
</body>
</html>

Possible duplicate of [How to display scroll bar onto a html table](https://stackoverflow.com/questions/8232713/how-to-display-scroll-bar-onto-a-html-table) — Slasher, Aug 29 '18 at 16:30

score 2 · Answer 1 · answered Aug 29 '18 at 16:42

You are incorrectly using .width() to get columns widths, since it returns the "inner width" of element (without borders). Use .outerWidth() instead , as it includes the border of the element as well :)

thead.find('td').each(function() {
    $(this).css('width', $(this).outerWidth());
});

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <!-- This allows for the web page to fit any sized screen -->
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
    <table cellpadding="5" cellspacing="0" border="1">
        <thead>
            <tr style="background: aqua">
                <td>First</td>
                <td>Last</td>
                <td>Phone</td>
                <td>Email Address</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>
            <tr>
                <td>Luke</td>
                <td>SkyWalker</td>
                <td>18002255625</td>
                <td>darthismyfather@yahoo.com</td>
            </tr>

        </tbody>

    </table>
</div>
<script>
    // http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
    var Browser = {
        version: function() {
            var version = 999; // we assume a sane browser
            if (navigator.appVersion.indexOf("MSIE") != -1) {
                // bah, IE again, lets downgrade version number
                version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            }

            return version;
        }
    };

    var table = $('table'),
        thead = table.find('thead'),
        fixed_thead,

        the_window = $(window),

        tr_1, tr_2, did_scroll = false;

    thead.find('td').each(function() {
        $(this).css('width', $(this).outerWidth());
    });

    fixed_thead = thead.clone();

    thead.after(fixed_thead);

    if( Browser.version() < 8 ) {
        fixed_thead.find('tr').css({
            'position': 'absolute',
            'top': 0
        });

        tr_1 = fixed_thead.find('tr:first');
        tr_2 = fixed_thead.find('tr:last').css('margin-top', tr_1.height());
    }else {
        fixed_thead.css({
            'position': 'fixed',
            'top': 0,
            'width': table.width()
        });
    }

    fixed_thead.hide();

    the_window.scroll(function() {
        if( the_window.scrollTop() >= table.offset().top ) {
            fixed_thead.show();

            if( Browser.version() < 8 ) {
                did_scroll = true;
            }
        }else {
            fixed_thead.hide();
        }

        if( the_window.scrollTop() > (table.offset().top + table.height()) - fixed_thead.height() ) {
            fixed_thead.hide();
        }
    });

    setInterval(function() {
        if( did_scroll ) {
            did_scroll = false;
            tr_1.css('top', the_window.scrollTop());
            tr_2.css('top', the_window.scrollTop());
        }
    }, 250);

</script>
</body>
</html>

How to align column headers when they are stuck to the top of the page

1 Answers1