Question

当用户滚动窗口时，我有一个总是显示其标题列的html表。它工作正常，但标题（thead）始终对齐;当表格很窄且居中时，列不再与标题列匹配。当表非常宽并且有许多列时，也会发生这种情况，迫使水平滚动出现;标题不会滚动，并且始终会显示第一列。

JavaScript的：

function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#main_table").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 = $("#main_table").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed', 'pointer-events': 'none', top: 0});
        clone_table.width($("#main_table").width());
        $("#table_container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({visibility:'visible'});
    }
}
else
{
    $("#clone").remove();
}
}
$("#main_table").wrap('<div id="table_container"></div>');
$('<div id="bottom_anchor"></div>').insertAfter('#main_table');
$(window).scroll(moveScroll);

HTML：

<table id="main_table" align="center">
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
    </tr>
    </thead>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
</table>

CSS：

body {
    width: 500px;
}
thead tr {
    background-color: lightgrey;
}

我该如何解决这个问题？

预览horizontal scroll problem

预览narrow centered table - 已解决

Answer 1

http://jsfiddle.net/AvaUU/7/

加入：

.css({
    position: 'fixed',
    'pointer-events': 'none',
    left: $("#main_table").offset().left+'px',
    top: 0
})

（哦，我把很多你的jQuery链接在一起，只是因为我喜欢它的样子。）

如何使浮动标题列水平滚动并防止它们向左对齐？

1 个答案: