javascript - 克隆并显示表格

Question

这相当棘手。我有一个比页面更宽的表格，因此用户必须水平滚动才能看到某些列。但随后他们就看不到最左边的(标题)列了。

我不负责表结构(在我看来相当奇怪的设置)，但它是这样的:

<table>
    <tr>
        <td>[THE HEADER COLUMN (as a separate table)]</td>
        <td>[THE TABLE BODY (as a separate table)]</td>
    </tr>
</table>

因此，当用户将其滚动到 View 之外并将鼠标悬停到屏幕边缘时，我需要在屏幕边缘显示“标题列表”。

我认为克隆标题表然后临时显示它是解决此问题的方法(无法移动原始表，因为页面宽度会改变)。这似乎是一个有点困惑的解决方案(特别是因为原始列标题表具有与其关联的 ID)。

您认为这是正确的做法吗？有什么想法吗？

我不需要需要任何 jQuery 事件处理方面的帮助，并且我不能使用可滚动表格来代替这种方法。

Answer 1

如果您将第一个表格的 css 设置为固定并将左侧设置为 0，那么它将粘附到屏幕的左边缘，您只需检查用户是否在每个滚动事件后开始滚动:

$(window).scroll( function(){ // fired after every scroll event
    if($(window).scrollLeft() > 0){ // check horizontal scroll
        $("#table1").css("position","fixed");
    } else {
        $("#table1").css("position","relative");
    }
});