如何将表格行固定在顶部

Question

我有一个表,而个元素,只有TD元素的存在.有没有办法让我的第一行固定(标签).桌子是这样的

<table>
  <tr>
    <td>Name:</td>
    <td>Age:</td>
  </tr>
  <tr>
    <td>John</td>
    <td>20</td>
  </tr>
  <tr>
    ......
  </tr>
</table>

我想要将名称和年龄字段固定为第一行.因此在滚动期间标签不会消失.

Answer 1

我一直在寻找这个问题的答案,最后我找到了一些非常好的东西.

秘密在于这段代码,使得表格中的滚动成为可能

thead, tbody, tr, td, th { display: block; }

但是你可以在http://jsfiddle.net/T9Bhm/7/找到一个完整的例子.

希望能帮助到你!:)

Answer 2

所有解决方案都有一个缺点：标题行与内容没有正确对齐。使用的解决方法之一是将宽度设置为某个值（绝对值或百分比）。

根据 pedromendessk 的回答，我能够使用以下答案找到这个问题的简洁解决方案： how-do-i-make-a-table-scrollable

因此，对于问题解决方案中提出的表格将是：

tr:first-child {
  position: sticky;
  top: 0;
  background: white;
}

就我个人而言，我会使用 th 作为表头，因为在添加 thead 和 tbody 后使用 tr:first-child 将无法正常工作。

Answer 3

我写了可以冻结页面或容器顶部的任何行（不仅是行）的插件。随意使用它。 http://maslianok.github.io/stickyRows/

Answer 4

设置position:fixed应该为你做到这一点：

<tr style="position:fixed">
    <td>Name:</td>
    <td>Age:</td>
</tr>

编辑：

<tr style="position:fixed;top:0;background:#FFF;">
    <td>Name:</td>
    <td>Age:</td>
</tr>

<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

示例： http: //jsfiddle.net/aVQjN/