Question

我有一个HTML表格。没什么太花哨的。它有thead和tbody。我想知道如何使用javascript或jQuery来移动tbody。

编辑：所以给你一些关于我正在做的事情的背景。我有一张桌子上有一些信息（谁在乎它是什么）。使用jQuery我将标头固定到位，这样当我向下滚动标题时仍然存在。这一切都运行良好，标题和第一行重叠的小问题。所以我需要向下移动tbody的顶部。含义标题将保持原位，并且主体将向下移动一点，以便我可以看到表格的第一行（即标题后的第一行）。

我想知道是否有一种方法可以使用jQuery或javascript。

Answer 1

我试图在这里重现你的问题。肯定有更好的方法来达到同样的效果，但这是你拥有的那种代码吗？没有必要使用jquery来保持表头的固定，所以我使用了css：

http://jsfiddle.net/LLjdk/

相关CSS：

thead {
    position: fixed;
    background: #fff;
}

table {
    margin-top: 28px
}

请注意，表格标题是固定的（使用滚动移动），并且背景设置为当表格的其余部分落后于它时，它不显示。最后，在表格的顶部添加了一个边距，使其不会重叠。

Answer 2

我不确定这是否是您要查找的内容，但从您的说明中我了解到您正试图让thead始终显示在页面顶部。这就是我想出的。

thead {
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
}
table {
    margin-top: 30px;
}

<强> DEMO

希望它能帮到你

Answer 3

您可以使用jQuery的滚动方法http://api.jquery.com/scroll/

我需要更多信息，但听起来你会做这样的事情：

$(window).scroll(function(){
    $("table").animate({marginTop: 50}, 250);
});

编辑：我知道这个答案已被接受为正确但似乎我误解了这个问题，正如downvotes所显示的那样。我认为OP是在让桌子向下滑动并保持固定之后就像标题一样。我建议使用滚动方法，因为这样就可以让表格在滚动时改变位置状态。

正如其他人所指出的那样，你只需要将表格向下推至标题的高度+所需的间距，如下所示：

table {
    margin-top: 80px;
}

HTML：如何移动对象的位置？

3 个答案: