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技巧。

这是这种技术的example。

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

Answer 2

这样做：

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

只需使用first-child伪元素。

或者如 @mishik 所讨论的那样，您可能需要position: fixed或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>

如何让html表第一行'绝对'

3 个答案: