jquery - 如何使html表格第一行'绝对'

Question

我有一张 80 行的桌子。我如何使第一行绝对？尝试添加

position: absolute;

到了，但那没有用。是否可以使用 css 或 jquery 来实现？

<table>
<thead>
<tr>
  <td style="position: absolute;"></td><td style="position: absolute;"></td>
</tr>
</thead>
<tbody>
<tr>
  <td></td><td></td>
</tr>
<tr>
  <td></td><td></td>
</tr>
</tbody>
</table>

编辑：对不起，我的意思是固定的不是绝对的。我的错

Answer 1

我假设您正在寻找一种方法来使您的第一行即使在页面滚动时也始终显示在顶部。 absolute不是这样做的方法。就像position:absolute将您的元素“粘合”到页面上的某个位置一样，然后如果页面滚动 - 您的元素会随着页面滚动并离开视图。

如果您希望您的标题无论如何都保持在顶部 - 您将需要涉及一些 css 技巧。

这是这种技术的一个例子。

当然，最简单的方法是使用position: fixed：Demo

Answer 2

像这样做：

table thead tr:first-child {
    position: absolute;
}

只需使用first-child伪元素。

或者正如@mishik所讨论的那样，您可能需要它是position: fixedor position: relative; top: 0;。

Answer 3

如果您想在标题保持原位的情况下滚动表格，这是您可以做的一件事，但是列不对齐仍然存在问题，您必须使标题更短，这样它就不会移到滚动条之外：

<div style="position:relative;">
 <div style="overflow: auto;">
  <table>
   <thead  style="position:absolute;">
    <!-- Header here -->
   </thead>
    <tbody> <!-- body here --> </tbody>
  </table>
 </div>
</div>