当列标题卡在页面顶部时如何对齐

时间：2018-08-29 16:28:06

标签： javascript html css

我正在尝试制作一个表格，其中的标题在您向下滚动时会停留在顶部。我一直在关注此视频：https://www.youtube.com/watch?v=SkVPkpSkorw。 我的表作为标题未对齐。任何方法都欢迎。我以为复制标题行会保留其原始宽度，但是由于某种原因，看起来宽度变短了

<!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>

1 个答案:

答案 0 :(得分：2)

您错误地使用{ "version": "2.0.0", "tasks": [ { "label": "Compile", "command": "g++", "args": [ "-g", "${file}", "-o", "${fileDirname}/${fileBasenameNoExtension}.exe", "-std=c++11", "-finput-charset=utf-8", "-fexec-charset=gbk" ], "problemMatcher": "$gcc", }, ] }来获取列宽，因为它返回元素的“内部宽度”（无边框）。请改用.width()，因为它也包含元素的边框：）

.outerWidth()

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

相关问题
最新问题