如何使表格行固定在顶部答案

【问题标题】：How to make table row fixed at the top如何使表格行固定在顶部
【发布时间】：2012-02-13 08:21:50
【问题描述】：

我有一个没有 th 元素的表格，那里只有 td 元素。有什么办法可以让我的第一行固定（标签）。桌子是这样的

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

我想将字段名称和年龄设为固定的第一行。这样在滚动过程中标签不会消失。

【问题讨论】：

你的第一句话对我来说甚至没有意义。您能否尝试更具体一些，也许发布一些示例代码？
...什么？尝试清楚一点。
没有元素的表，只有元素吗？什么？
看，我已经编辑了问题
可能重复：stackoverflow.com/questions/296020/…

标签： html css

【解决方案1】：

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

根据 pedromendessk 的回答，我能够使用以下答案找到一个巧妙的解决方案： how-do-i-make-a-table-scrollable

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

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

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

【讨论】：

【解决方案2】：

使用数据表我们也可以固定页眉和页脚。找到下面的代码......

tbl_Purcordr=$("#tbl_Purcordr").DataTable({
  'paging': true,
  'pageLength': 25,
  'bLengthChange': false,
  'sorting': false,
  'filter': true,
  'info': false,
  'scrollY': 360,
  'background': 'none',
  'fixedHeader': {
    'header': true,
    'footer': true
  }
});

【讨论】：

【解决方案3】：

我一直在寻找这个问题的答案，最后我找到了一个非常好的方法。

秘密就在这段代码中，它使表格中的滚动成为可能

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

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

希望对您有所帮助！ :)

【讨论】：

虽然其他答案效果很好，但这是最干净的解决方案。它不需要特殊的“虚拟”行（需要与静态行具有完全相同的高度），并且页面滚动条从表格真正滚动的点正确显示。
@Benjo 固定宽度的列是什么意思？如果您查看 jsfiddle 示例，您可以使用 % (width: 19.2%;)，这有点动态。
有点动态动态

【解决方案4】：

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

【讨论】：

制作的插件很棒..!!

【解决方案5】：

在您要保持固定的行上，设置样式position: fixed 并为该行设置背景颜色，否则滚动列表时最终会出现两层文本。

另一个需要注意的问题是，由于固定位置样式的工作原理，第一行将隐藏在固定行之下。解决这个问题，放在一个空白行中。

<table width="400" border="1">
    <tr style="position: fixed; background-color: grey;">
        <td width="200">
            Name
        </td>
        <td width="200">
            Age
        </td>
    </tr>
    <tr>
        <td width="200">
            &nbsp;
        </td>
        <td width="200">
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            John
        </td>
        <td>
            28
        </td>
    </tr>
    <tr>
        <td>
            Jacob
        </td>
        <td>
            22
        </td>
    </tr>
    <tr>
        <td>
            Nicole
        </td>
        <td>
            12
        </td>
    </tr>
</table>

查看我的完整代码的链接。 http://jsfiddle.net/brettadamsga/yeAhU/

【讨论】：

如果表格超出页面宽度，您有解决方案吗？
如果表格在页面内，这不起作用，因为位置固定始终是顶级

【解决方案6】：

设置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/

【讨论】：

这样做时，行移到了底部
这是一个很好的解决方法，但是这一行下面的行需要没有内容，第一行也需要背景色。否则你将有两层文字，它们将不可读。
当您使用固定在表格行上的位置时，您必须设置表格单元格的宽度 - 此解决方案将因多列而失败。