如何让表格行固定在顶部

Question

我有一张没有th元素的表格，只有td元素。有什么办法可以使我的第一行固定（作为标签）？表格像这样：

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

我想将第一行的“名称”和“年龄”字段固定。这样在滚动时，标签不会消失。

- n92

---

你的第一句话对我来说甚至没有意义。您能否更具体些，也许发布一些示例代码？ - opatut

什么？请尽量表达得更清楚些。 - Jivings

表格里没有元素，只有元素在那里？什么意思？ - Fabian

可能是重复问题：https://dev59.com/FHVC5IYBdhLWcg3wbglT - Dennis Traub

固定宽度？相对于浏览器客户端区域固定？因为它损坏了而固定？表行不会自动移动。 - 3Dave

你应该回到你的问题中检查编辑和其他答案。如果它解决了你的问题，也要接受答案。 - Fabian

Answer 1

我已经寻找了一段时间的答案，最终我找到了一个非常好用的解决方案。

秘密就在这段代码中，它实现了表格的滚动功能。

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

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

希望有所帮助！ :)

- pedromendessk

---

虽然其他答案也很好，但这是最干净的解决方案。它不需要特殊的“虚拟”行（需要与静态行完全相同的高度），并且页面滚动条从表格真正滚动的点开始正确显示。 - FurloSK

@Benjo，你说的固定宽度列是什么意思？如果你看一下这个 jsfiddle 的例子，你可以使用百分比（width: 19.2%），这种方式算是比较动态的。 - pedromendessk

有点动态 <> 动态 - Benjo

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 不会正确工作。

- oxym

Answer 3

我编写了一个插件，可以把任意一行（不仅限于th）固定在页面或容器的顶部。欢迎使用。 http://maslianok.github.io/stickyRows/

- Vitalii Maslianok

---

太棒了，插件制作完成了！！ - Parag Tyagi

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>

Example: http://jsfiddle.net/aVQjN/

- Fabian

---

在这样做之后，行被移动到底部。 - n92

这是一个很好的修复，但是在这行下面的行不能有内容，而第一行还需要一个背景颜色。否则你将会有两层文字，它们将无法阅读。 - user1106352

当在表格行上使用固定定位时，您需要设置表格单元格的宽度 - 如果列数大于两列，则此解决方案将失败。 - Jonathan Tonge

Answer 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/

- user1106352

---

你有解决方案，如果表格超出页面宽度的话吗？ - tommy.carstensen

这个在页面中的表格不起作用，因为固定位置总是处于顶层。 - Michael B.

Answer 6

使用数据表格，我们可以固定表头和页脚。 请查看以下代码......

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
  }
});

- Dipak